微信小程序的两种图片加载方式(如何在微信小程序中加载图片)

在微信小程序中，要显示一张图片，有两种方式加载图片:

1.加载本地图片

2.加载网络图片

加载本地图片

ltimage class = widget _ _ arrow src = /image/arrow right . png ；mode = aspectFill gt lt/image gt；src = /image/arrow right . png ；这句话是加载本地图片资源。想想在iOS中加载本地镜像，imageName:，类似。

加载网络图片

微信在加载网络方面包装的很好，包括语音和视频加载。直接给 # 39；src # 39这个属性附有一个地址，它会自动加载。

ltimage class = 图像_帧 src = { { imageUrl } } mode = aspectFill gt lt/image gt；这个imageUrl是js文件中的数据

数据:{ imageUrl: ；http://img1.3lian.com/2015/w7/85/d/101.jpg&; }，也可以直接写成

ltimage class = 图像_帧 src = http://img1.3lian.com/2015/w7/85/d/101.jpg&;模式= aspectFill gt lt/image gt；让我们来看看图像的一些属性。

请注意，图像组件的默认宽度和高度是300像素和225像素。

上面的代码中使用了Src。

模式有12种模式，其中3种是缩放模式，9种是裁剪模式。

具体说明和建议见官方文件，很详细。单击该链接。

很简单，就这样。

遗留问题

在实践中，我想实现这样一个功能:点击一个按钮，重新加载这个图片。

不知道如何在js文件中直接操作image。后续研究可能就知道了。谁知道路？欢迎留言评论。

补充

剩下的问题已经回答了。

在key的响应方法中，直接用setData设置imageUrl的新地址。

download image:function(event){ console . log(event)var that = this；this . setdata({ imageUrl: ；http://h . hi photos . Baidu . com/zhidao/pic/item/6d 81800 a 19d 8 BC 3 ed 69473 CB 848 ba 61 ea 8d 34516 . jpg ；})}效果如下:

推荐:《小程序开发教程》以上是微信小程序两种图片加载方式的详细介绍。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 在微信小程序中加载图片的两种方式（如何在微信小程序中加载图片）

本文由主机参考刊发，转载请注明：微信小程序的两种图片加载方式(如何在微信小程序中加载图片) https://zhujicankao.com/76288.html