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

最新推荐文章于 2024-12-17 16:55:29 发布

原创最新推荐文章于 2024-12-17 16:55:29 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文为acoolgiser原创文章，转载请贴上原文链接。（公众号：acoolgiser）

文章标签：

#weex eros 循环添加图片 #weex eros APP显示图片 #eros APP 添加图片 #vue 添加图片 #循环显示图片

vue.js 同时被 2 个专栏收录

21 篇文章

订阅专栏

weex eros

8 篇文章

订阅专栏

本文介绍了使用Weexeros框架开发APP时如何在页面上添加单张或多张图片的方法，并详细解释了img与image标签的不同用法及注意事项。

这里笔者介绍使用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;
}