WeChat 미니 프로그램의 두 가지 이미지 로딩 방법

WeChat 애플릿에서 사진을 로드하는 방법에는 두 가지가 있습니다.

1. 로컬 사진 로드

2. 네트워크 사진 로드

로컬 사진 로드

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

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

네트워크 이미지 로드 중

WeChat은 여전히 ​​음성 및 비디오 로드를 포함하여 네트워크 로드에 매우 능숙합니다. 'src' 속성에 주소를 직접 첨부하면 자동으로 로드됩니다.

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

이 이미지 URL은 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"
    })
  }

효과는 다음과 같습니다.

권장: "Mini Program Development Tutorial"

위 내용은 WeChat 미니 프로그램의 두 가지 이미지 로딩 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!