weex eros APP 如何在vue页面显示图片，循环添加多张图片显示在vue页面上

acoolgiser

发布于 2019-04-17 17:25:44

2K0

发布于 2019-04-17 17:25:44

文章被收录于专栏：acoolgiser_zhuanlan

这里笔者介绍使用weex eros框架开发APP时遇到的在页面上添加图片的问题：

一、首先是添加一张图片

第一种方式：img标签

<img class="demo-image" :src="" alt="">

第二种方式：image标签

<image class="demo-image" :src="" alt=""></image>

两种标签均支持，但是与普通的HTML页面写法不一样，两种方式都必须给图片标签添加class属性设置图片的width和height，否则不会显示在eros APP上，笔者认为这是由于weex eros框架对vue封装的结果，导致了写法的变化。

比如：

<image class="demo-image" :src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg" alt="image..."></image>

或：

<image class="demo-image" :src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg" alt=""></image>

均设置图片标签的样式class：

.demo-image {
    width: 150px;
    height: 150px;
    margin-top: 10px;
}

二、通过v-for语句循环添加多张图片

比如：

<div>
    <ul>
        <li v-for ="item_img in imageList" :key="item_img.id">
             <image class="demo-image" :src="item_img.src" alt="image..."></image>
        </li>
    </ul>
</div>

或：

<div v-for="item_img in imageList" :key="item_img.id">
    <image class="demo-image" :src="item_img.src" alt=""></image>
</div>

当然，vue中的数据定义：

imageList: [
	{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg' },
	{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' },
	{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' }
]

同样需要定义样式：

.demo-image {
    width: 150px;
    height: 150px;
    margin-top: 10px;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年04月04日，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

图片标签

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

图片标签

登录后参与评论

0 条评论

热度

weex eros APP 如何在vue页面显示图片，循环添加多张图片显示在vue页面上

weex eros APP 如何在vue页面显示图片，循环添加多张图片显示在vue页面上

这里笔者介绍使用weex eros框架开发APP时遇到的在页面上添加图片的问题：

一、首先是添加一张图片

第一种方式：img标签

第二种方式：image标签

两种标签均支持，但是与普通的HTML页面写法不一样，两种方式都必须给图片标签添加class属性设置图片的width和height，否则不会显示在eros APP上，笔者认为这是由于weex eros框架对vue封装的结果，导致了写法的变化。

比如：

或：

均设置图片标签的样式class：

二、通过v-for语句循环添加多张图片

比如：

或：

当然，vue中的数据定义：

同样需要定义样式：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐