版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1414703
这里笔者介绍使用weex eros框架开发APP时遇到的在页面上添加图片的问题：
一、首先是添加一张图片
第一种方式：img标签
代码语言：javascript复制<img class="demo-image" :src="" alt="">第二种方式：image标签
代码语言：javascript复制<image class="demo-image" :src="" alt=""></image>两种标签均支持，但是与普通的HTML页面写法不一样，两种方式都必须给图片标签添加class属性设置图片的width和height，否则不会显示在eros APP上，笔者认为这是由于weex eros框架对vue封装的结果，导致了写法的变化。
比如：
代码语言：javascript复制<image class="demo-image" :src="https://img.yuanmabao.com/zijie/pic/2019/04/17/aniidoafgtm.jpg" alt="image..."></image>或：
代码语言：javascript复制<image class="demo-image" :src="https://img.yuanmabao.com/zijie/pic/2019/04/17/aniidoafgtm.jpg" alt=""></image>均设置图片标签的样式class：
代码语言：javascript复制.demo-image {
width: 150px;
height: 150px;
margin-top: 10px;
}二、通过v-for语句循环添加多张图片
比如：
代码语言：javascript复制<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>或：
代码语言：javascript复制<div v-for="item_img in imageList" :key="item_img.id">
<image class="demo-image" :src="item_img.src" alt=""></image>
</div>当然，vue中的数据定义：
代码语言：javascript复制imageList: [
{ src: 'https://img.yuanmabao.com/zijie/pic/2019/04/17/aniidoafgtm.jpg' },
{ src: 'https://img.yuanmabao.com/zijie/pic/2019/04/17/lrjfghviygc.jpg' },
{ src: 'https://img.yuanmabao.com/zijie/pic/2019/04/17/no5hg0eq0x0.jpg' }
]同样需要定义样式：
代码语言：javascript复制.demo-image {
width: 150px;
height: 150px;
margin-top: 10px;
}
