WeChat 애플릿 개발 이미지 로딩(로컬, 네트워크) 예제 코드

이 글은 주로 WeChat 미니 프로그램의 이미지 로딩(로컬, 네트워크)에 대한 자세한 예시에 대한 관련 정보를 소개합니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

WeChat 미니 프로그램에는 사진을 표시하기 위한, 이미지를 로드하는 두 가지 방법:

1. 로컬 이미지 로드
   

2. 네트워크 로드 사진

로컬 사진 로드

<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> 
</image>

src= " /image/arrowright.png" 이 문장은 로컬 이미지 리소스를 로드하는 것입니다. iOS에서 imageName:과 유사한 로컬 이미지를 로드하는 것을 생각해 보세요.

네트워크 이미지 로딩

WeChat은 음성 및 영상 로딩을 포함하여 네트워크 로딩에 매우 능숙합니다. 'src' 속성에 주소를 직접 첨부하면 자동으로 로드됩니다.

<image class="image_frame" src="{{imageUrl}}" mode="aspectFill"> 
</image>

이 imageUrl은 js 파일

data:{ 
  imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" 
},

에 있는 데이터입니다.

<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"> 
</image>

이미지의 몇 가지 속성을 살펴보겠습니다

입니다. 주의할 점은 다음과 같습니다. 이미지 구성 요소의 기본 너비는 300px이고 높이는 225px입니다.

src는 위 코드에서 사용됩니다.

모드에는 12개의 모드가 있으며 그 중 3개는 확대/축소 모드이고 9개는 자르기 모드입니다.

구체적인 지침은 매우 상세하게 설명된 공식 문서를 읽어보는 것이 좋습니다.

그렇습니다.

남은 문제

실제로는 버튼을 클릭해 이미지를 다시 로드하는 기능을 구현하고 싶습니다.

js 파일에 있는 이미지를 직접 조작하는 방법을 모르겠습니다. 앞으로는 알 수도 있을 것입니다. 혹시 방법 아시는 분 계시면 댓글 남겨주세요.

보충

나머지 질문에 대한 답변이 완료되었습니다.

키 응답 방법에서는 setData를 직접 사용하여 imageUrl에 새 주소를 설정할 수 있습니다

downLoadImage:function(event){ 
  console.log(event) 
  var that = this; 
  this.setData({ 
    imageUrl:"http://h.hiphotos.baidu.com/zhidao/pic/item/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg" 
  }) 
 }

효과는 다음과 같습니다. 다음은 다음과 같습니다.

읽어 주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

위 내용은 WeChat 애플릿 개발 이미지 로딩(로컬, 네트워크) 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!