前端开发攻略---三种方法解决Vue3图片动态引入问题

news2025/2/5 19:59:15

1、将图片放入public文件夹中

2、使用 /src/.... 路径开头

3、生成图片的完整URL地址（推荐）

1、将图片放入public文件夹中

使用图片：路径为 '/public' 开头

<template>
  <div>
    <img :src="`/public/${flag ? '01' : '02'}.jpg`" alt="" />
    <button @click="flag = !flag">动态切换图片</button>
  </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
</script>

<style scoped>
img {
  width: 500px;
  height: 500px;
  vertical-align: middle;
}
button {
  width: 100px;
  height: 50px;
}
</style>

2、使用 /src/.... 路径开头

图片位置位于 src 目录下

可以使用 '/src/...' 动态引入图片
<template>
  <div>
    <img :src="`/src/assets/images/${flag ? '01' : '02'}.jpg`" alt="" />
    <button @click="flag = !flag">动态切换图片</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
</script>

<style scoped>
img {
  width: 500px;
  height: 500px;
  vertical-align: middle;
}
button {
  width: 100px;
  height: 50px;
}
</style>
致命问题：使用这种方式本地看起来很正常，但是部署到生产环境图片就加载不出了，因为打包后路径出现了问题

3、生成图片的完整URL地址（推荐）

图片位置位于 src 目录下

通过手写 getImageUrl函数动态生成图片URL地址
<template>
  <div>
    <img :src="getImageUrl(flag ? '01.jpg' : '02.jpg')" alt="" />
    <button @click="flag = !flag">动态切换图片</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)

function getImageUrl(url) {
  const path = new URL(`./assets/images/${url}`, import.meta.url)
  return path.href
}
</script>

<style scoped>
img {
  width: 500px;
  height: 500px;
  vertical-align: middle;
}
button {
  width: 100px;
  height: 50px;
}
</style>
注意：getImageUrl函数中使用的地址是相对位置的地址

该函数位于 App.vue 文件中所以 getImageUrl函数中的地址是 ./assets/....

当该函数所处的文件地址变化时，找图片的地址也要相对发生变化

解释一下getImageUrl函数中代码的作用和意思

作用：

这个函数是用来获取图片的 URL 地址的。它接受一个参数 url，然后使用 new URL() 构造函数创建一个新的 URL 对象，其中包含了 ./assets/images/ 目录下的图片路径。在这个路径中，url 参数用于指定具体的图片文件名或路径。最后，通过 path.href 返回完整的 URL 地址。

意思：

1、new URL() 构造函数创建了一个新的 URL 对象。

2、这个 URL 对象的第一个参数是一个字符串，表示相对路径 ./assets/images/，这里假设这是图片文件存放的目录。

3、第二个参数 import.meta.url 是 Node.js 中的一个特殊变量，它指向当前模块文件的 URL 地址。

4、函数将传入的 url 参数附加到 ./assets/images/ 路径后面，得到了完整的图片路径。

5、最后，通过 path.href 返回这个完整的图片 URL 地址。