vue项目动态引入图片无法显示的问题

一、通过vue+webpack构建的前端项目

前三张图片通过v-for动态引入src属性：

<template>
  <div class="container">
    <div class="img" v-for="(item, index) in imgList" :key="index">
      <img :src="item.path" />
    </div>
    <img src="./static/clothShoe.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          code: 0,
          path: "./static/clothShoe.png",
        },
        {
          code: 1,
          path: "./static/department.png",
        },
        {
          code: 2,
          path: "./static/digitalProducts.png",
        },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
}
img {
  height: 200px;
  width: 200px;
}
</style>

效果：

前三张图片展示不出来，第四张图片正常展示

解决：

动态引入的图片地址通过require引入

<template>
  <div class="container">
    <div class="img" v-for="(item, index) in imgList" :key="index">
      <img :src="item.path" />
    </div>
    <img src="./static/clothShoe.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          code: 0,
          path: require("./static/clothShoe.png"),
        },
        {
          code: 1,
          path: require("./static/department.png"),
        },
        {
          code: 2,
          path: require("./static/digitalProducts.png"),
        },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
}
img {
  height: 200px;
  width: 200px;
}
</style>

效果： 

 二、通过vue+vite构建的前端项目

代码：

<template>
  <div class="container">
    <div class="img" v-for="(item, index) in imgList" :key="index">
      <img :src="item.path" />
    </div>
    <img src="./static/clothShoe.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          code: 0,
          path: "./static/clothShoe.png",
        },
        {
          code: 1,
          path: "./static/department.png",
        },
        {
          code: 2,
          path: "./static/digitalProducts.png",
        },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
}
img {
  height: 200px;
  width: 200px;
}
</style>

效果：

解决 ：

在imgList的数组中有关图片路径的path属性只要该图片的名称，它在该项目的具体路径通过URL构造函数去拼接，${url}前面的相对路径由你getUrl方法定义的文件位置所决定。

代码：

<template>
  <div class="container">
    <div class="img" v-for="(item, index) in imgList" :key="index">
      <img :src="getUrl(item.path)" />
    </div>
    <img src="./static/clothShoe.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          code: 0,
          path: "clothShoe.png",
        },
        {
          code: 1,
          path: "department.png",
        },
        {
          code: 2,
          path: "digitalProducts.png",
        },
      ],
    };
  },
  methods: {
    getUrl(url) {
      return new URL(`./static/${url}`, import.meta.url).href;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
}
img {
  height: 200px;
  width: 200px;
}
</style>

效果：