vue3如何加载本地图片等静态资源浅析
更新时间：2023年04月11日 09:01:12 作者：Lvan的前端笔记
在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,下面这篇文章主要给大家介绍了关于vue3如何加载本地图片等静态资源的相关资料,需要的朋友可以参考下
背景
在我们用 vue2 + webpack 的时候，加载图片资源是这样用的：
<img :src="require('@/assets/test.png')" />这样打包后就会触发 file-loader 打包图片资源，在 dist 文件夹中就可以看到这个图片（如果图片较小会打包进代码中变为 base64 引入）。
但是在 vue3 + vite 中，使用这种方式是不行的，vite 中没有 require 会报错。
解决方案 官方文档 中提到了两种方案，今天我来验证一下。
将资源引入为 URL
import chatHealth from '@/assets/chat-health.png' <img :src="chatHealth" alt="" />
可以看到，由于这张图片较小被打包成为了 base64，所以 dist 文件夹没有输出这个图片。
接下来我拿一张大图试验一下，发现确实打包出来了。
所以这种方法亲测有效。
new URL(url, import.meta.url)
第二种方法是：
<img :src="getImgUrl('chat-health.png')" alt="" />
const getImgUrl = (name: string) => {
return new URL('../../../../../assets/' + name, import.meta.url).href
}
使用这种方法，在本地运行的时候可以加载出来图片。
但是发到真实环境（测试/线上），发现找不到文件了，我看了下目录指向的是：
但这个路径并不对，然后我再看打包后的文件
发现打包后的文件并没有这个图片，这里我有点不太懂问题出在哪里？
感觉好像就是 vite 没有去加载这个图片，所以打包文件看不到，并不是因为图片小，我换了一个大图依旧 dist 没有，不知道是不是我哪里操作不对。
结尾
对比这两种方案，我只试验成功了第一种，第二种如果是我哪里操作不对的欢迎指正
到此这篇关于vue3如何加载本地图片等静态资源的文章就介绍到这了,更多相关vue3加载本地图片静态资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了Vue如何在原窗口与新窗口打开外部链接,文中给大家提到了vue跳转外部链接的实现代码，本文给大家介绍的非常详细，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了使用 Vue 实现一个虚拟列表的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
在Vue的模板语法中,我们学了很多指令,当然除了这些指令,Vue也允许我们自己定义自己的指令,所以本文就来和大家聊聊如何使用自定义指令吧2023-10-10
element-ui动态级联选择器回显问题详解(二十多行代码搞定）
大家在使用element-ui的时候肯定会遇到这样一个问题,就是在你使用级联选择器的回显问题,下面这篇文章主要给大家介绍了关于element-ui动态级联选择器回显问题的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要为大家详细介绍了vue+echart实现圆滑折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue 使用虚拟 DOM 的初衷不仅是为了性能优化,更重要的是为了解决开发效率和灵活性的问题,下面我们就来探讨一下虚拟DOM的作用与原理吧2024-12-12
这篇文章主要介绍了vue上通过krpano.js实现360全景图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了解决vue路由发生了跳转但是界面没有任何反应问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论