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

目录

 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 地址。