vue3：加载本舆图片等静态资源

配景

在我们用 vue2 + webpack 的时候，加载图片资源是如许用的：

1. <img :src="require('@/assets/test.png')" />

复制代码

如许打包后就会触发 file-loader 打包图片资源，在 dist 文件夹中就可以看到这个图片（假如图片较小会打包进代码中变为 base64 引入）。
但是在 vue3 + vite 中，利用这种方式是不可的，vite 中没有 require 会报错。
办理方案 官方文档 中提到了两种方案，本日我来验证一下。
将资源引入为 URL

1. import chatHealth from '@/assets/chat-health.png'
2. <img :src="chatHealth" alt="" />

复制代码

可以看到，由于这张图片较小被打包成为了 base64，所以 dist 文件夹没有输出这个图片。
接下来我拿一张大图试验一下，发现确实打包出来了。

所以这种方法亲测有用。
new URL(url, import.meta.url)

第二种方法是：

1. <img :src="getImgUrl('chat-health.png')" alt="" />
3. const getImgUrl = (name: string) => {
4.   return new URL('../../../../../assets/' + name, import.meta.url).href
5. }

复制代码

利用这种方法，在本地运行的时候可以加载出来图片。

但是发到真实环境（测试/线上），发现找不到文件了，我看了下目次指向的是：

但这个路径并不对，然后我再看打包后的文件

发现打包后的文件并没有这个图片，这里我有点不太懂问题出在那里？
感觉似乎就是 vite 没有去加载这个图片，所以打包文件看不到，并不是由于图片小，我换了一个大图仍旧 dist 没有，不知道是不是我那里操纵不对。
末端

对比这两种方案，我只试验乐成了第一种，第二种假如是我那里操纵不对的欢迎指正

来源：https://blog.csdn.net/weixin_43972437/article/details/129028118
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！