vue的v-for循环中图片加载路径问题

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>