vue3:加载本地图片等静态资源 | 您所在的位置:网站首页 › import引入图片 › vue3:加载本地图片等静态资源 |
背景
在我们用 vue2 + webpack 的时候,加载图片资源是这样用的: 这样打包后就会触发 file-loader 打包图片资源,在 dist 文件夹中就可以看到这个图片(如果图片较小会打包进代码中变为 base64 引入)。 但是在 vue3 + vite 中,使用这种方式是不行的,vite 中没有 require 会报错。 解决方案 官方文档 中提到了两种方案,今天我来验证一下。 将资源引入为 URL import chatHealth from '@/assets/chat-health.png'
接下来我拿一张大图试验一下,发现确实打包出来了。 第二种方法是: const getImgUrl = (name: string) => { return new URL('../../../../../assets/' + name, importa.url).href }使用这种方法,在本地运行的时候可以加载出来图片。 对比这两种方案,我只试验成功了第一种,第二种如果是我哪里操作不对的欢迎指正 |
CopyRight 2018-2019 实验室设备网 版权所有 |