uni-app中动态展示图片

原创已于 2022-08-17 16:06:01 修改 · 2.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app #java #前端

收录于

于 2022-08-17 15:24:26 首次发布

uniapp 专栏收录该内容

9 篇文章

订阅专栏

这段代码展示了如何在前端根据不同的条件显示不同的网络图片，通过设置<image>标签的src属性，利用三元运算符选择对应的图片URL。图片源来自同一域名下的不同路径。

//如果是网络图片
<view class="payicon"><image :src="item.payChannel == 4 ? selectimg[0].imgUrl :item.payChannel == 3 ? selectimg[0].imgUrl2 : selectimg[0].imgUrl3" mode=""></image></view>
    
export default {
    data() {
        return {
            selectimg:[{
                imgUrl:'http://static.hiyunyu.com/images/ogo.png',
                imgUrl2:'http://static.hiyunyu.com/images/zblogo.png',
                imgUrl3:'http://static.hiyunyu.com/images/UioPay.png' 
                //如果是本地图片最好加个require 	imgUrl3:require('../../static/image/UnionPay.png')			   
            }]
        }
    }
}