vue中动态渲染静态图片资源

不报错且f12查看元素的时候，显示的src说明已经渲染到html的src上，但是就是不显示在页面上

原因

在vue上，动态渲染静态图片资源（比如从assets文件夹加载的图片）需要注意打包工具对静态资源的解析方式

由于vue2的脚手架工具是vue-cil，而vue-cil的底层是基于webpack，vue3的脚手架工具是create-vue，create-vue的底层是基于vite，所以两者的底层打包工具不一样，相应的对静态资源的解析方式也不一样

vue2解决办法

方法一

需要require动态加载静态资源

<template>
  <div>
    <div v-for="(item, index) in images" :key="index">
      <img :src="getImagePath(item)" alt="image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.png', 'image2.png', 'image3.png'], // 图片文件名
    };
  },
  methods: {
    getImagePath(image) {
      // 使用 require 加载图片资源
      return require(`@/assets/images/${image}`);
    },
  },
};
</script>

方法二

使用webpack提供的静态资源路径解析~

<template>
  <div>
    <div v-for="(item, index) in images" :key="index">
      <img :src="`~@/assets/images/${item}`" alt="image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.png', 'image2.png', 'image3.png'],
    };
  },
};
</script>

vue3解决办法

如果你的项目是通过vite创建的vue3项目的话，应该使用vite提供的静态资源载入方法

requie是webpack提供的一种加载能力，所以vite不能用require方法

方法一

使用new URL(`   `, import.meta.url).href

<template>
  <div>
    <div v-for="(item, index) in images" :key="index">
      <img :src="getImagePath(item)" alt="image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.png', 'image2.png', 'image3.png'],
    };
  },
  methods: {
    getImagePath(image) {
      // 使用 new URL 加载图片资源
      return new URL(`../assets/images/${image}`, import.meta.url).href;
    },
  },
};
</script>

方法二

如果路径是动态拼接的，可以直接在模板中拼接路径

<template>
  <div>
    <div v-for="(item, index) in images" :key="index">
      <img :src="`/src/assets/images/${item}`" alt="image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.png', 'image2.png', 'image3.png'],
    };
  },
};
</script>