vue的v-for循环中图片加载路径问题
产品要求
要求图片和它的名字一一对应，
vue中的img的src可以动态绑定到一个变量上
<template><div><ul><li v-for ="item,index in array" :key="index"><img :src="item.url"><p>{{item}}</p></li></ul></div></template><script>export default {data(){return{array:[{url:'./picture/3.jpg', name:'眼影'},{url:'./picture/4.jpg', name:'眼影'},{url:'./picture/5.jpg', name:'眼影'},{url:'./picture/3.jpg', name:'眼影'},]}},}</script><style></style>
打开控制台显示：img 的src 已经是一个字符串，它不是我们想要的变量了。
它对a.url进行了一次解析变成了字符串，就完事了，绑定变量，就是解析一次。而对于url 来说，它本来就是变量，无法再进行分割解析，所以它会去data 里面去找，如果找不到，才报错。
把item.EnName 变成图片的地址,有人提到了require 方法,require 它是一个表达式，可以进行赋值操作。
<template><div><ul><li v-for ="item,index in array" :key="index"><img :src="item.url"><p>{{item}}</p></li></ul></div></template><script>export default {data(){return{array:[{url:require(`./picture/3.jpg`), name:'眼影'},{url:require(`./picture/4.jpg`), name:'眼影'},{url:require(`./picture/5.jpg`), name:'眼影'},{url:require(`./picture/3.jpg`), name:'眼影'},]}},}</script><style></style>
