- 起因:动态图片会自动拼接根路径,为了方便图片要放在public下
- 解决:使用require引入图片资源
- 注意:不能动态路径中使用require,如<img :src="require(.../assets/${item.imgUrl})" alt="" />{``{ item.title }}。在Vue CLI创建的项目中,Webpack默认会对require进行解析,但是在动态路径中使用require时,Webpack可能无法正确解析路径。
- 正确:
            
            
              javascript
              
              
            
          
          <template>
  <div class="box">
    <div v-for="item in dataList" :key="item.title">
      <img :src="getImage(item.imgUrl)" alt="" />{{ item.title }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        {
          imgUrl: "1jpeg.jpeg",
          title: "你好",
        },
        {
          imgUrl: "2jpeg.jpeg",
          title: "我不好",
        },
      ],
    };
  },
  methods: {
    getImage(imgUrl) {
      return require(`../assets/${imgUrl}`);
    },
  },
};
</script>