vue2，vue3，vue3 + vite 动态加载图片的方式

记录一个小问题

今天在给自己的小demo加视差滚动皮肤盒子的时候，出现了一个图片加载失败的问题，我的图片放在assets目录下。后续已解决

在Vue开发中，动态绑定图片在不同版本及构建工具下有不同实现方式，具体总结如下：

Vue 2
- 使用计算属性和require函数 ：在data中定义图片名变量，通过计算属性利用require函数根据变量值动态引入assets目录下的图片。例如：

javascript 复制代码

<template>
  <img :src="dynamicImage" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    };
  },
  computed: {
    dynamicImage() {
      return require(`@/assets/${this.imageName}`);
    }
  }
};
</script>

原理：Webpack在打包时，require函数会被解析，将对应的图片资源打包进项目，从而实现动态绑定。

Vue 3
- 使用计算属性和require函数（Webpack构建） ：和Vue 2类似，借助计算属性和require函数实现动态绑定。示例如下：

javascript 复制代码

<template>
  <img :src="dynamicImage" alt="Dynamic Image">
</template>

<script setup>
import { ref, computed } from 'vue';

const imageName = ref('example.jpg');
const dynamicImage = computed(() => require(`@/assets/${imageName.value}`));
</script>

使用import.meta.glob（Vite构建） ：Vite中可利用import.meta.glob导入assets目录下的所有图片，再根据变量动态获取图片路径。代码如下：

javascript 复制代码

<template>
  <img :src="dynamicImage" alt="Dynamic Image">
</template>

<script setup>
import { ref } from 'vue';

const imageName = ref('example.jpg');
const images = import.meta.glob('/src/assets/*');
const dynamicImage = images[`/src/assets/${imageName.value}`];
</script>

Vue 3 + Vite
- 使用new URL ：通过new URL结合import.meta.url处理图片路径，确保Vite能正确解析图片资源。如：

javascript 复制代码

<template>
  <img :src="skin" alt="Dynamic Image">
</template>

<script setup>
import { ref } from 'vue';

const skins = ref([
  new URL('@/assets/bg-img/bg1.png', import.meta.url).href,
  new URL('@/assets/bg-img/bg2.png', import.meta.url).href,
  new URL('@/assets/bg-img/bg3.png', import.meta.url).href,
  new URL('@/assets/bg-img/bg4.png', import.meta.url).href
]);
const skin = skins.value[0];
</script>

优势：相比直接使用路径，new URL方式能更好地适应Vite的模块解析机制，保证图片在开发和生产环境中都能正确加载。

在实际项目中，需根据项目的Vue版本、构建工具以及具体需求选择合适的动态绑定图片方式。如果使用Webpack构建，Vue 2和Vue 3都可采用require函数的方式；若使用Vite构建，Vue 3中import.meta.glob和new URL是更优的选择。