vue图片渲染

vue图片渲染

html

<div class="child">
				<img src="../assets/image/qimu/jian.png" class="child_img"/>
					<div class="child_box" v-for="item in child_list">
						<img :src="item.img" class="child_one"/>
							<div class="child_text">
								<div class="child_list">商品名称：{{item.name}}</div>
								<div class="child_list">单价：{{item.price}}元</div>
								<div class="child_list">数量：{{item.num}}</div>
							</div>
					</div>
			</div>

js

export default{
		data(){
			return{
				child_list:[
					{
						img:require('@/assets/image/qimu/t1.jpg'),
						name:"头像",
						price:"10",
						num:"5",
					},
					{
						img:require('@/assets/image/qimu/t2.jpg'),
						name:"头像",
						price:"10",
						num:"5",
					},
					{
						img:require('@/assets/image/qimu/t3.jpg'),
						name:"头像",
						price:"10",
						num:"5",
					},
					{
						img:require('@/assets/image/qimu/t3.jpg'),
						name:"头像",
						price:"10",
						num:"5",
					}
				]
			}
		},
		methods:{
			
		},
		
	}

这里需要注意的是当图片是从data里拿出来渲染时需要在 src前面加：因为他是一个变量，其次是当图片所在目录不在assets下时或在其他文件夹时需要在前面加 require。