动态导入图片

咸鱼肥美妖娆2024-03-17 22:02

起因：动态图片会自动拼接根路径，为了方便图片要放在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>