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