vue3+vite 图片引入路径问题

4,238 阅读1分钟

不论图片引用是在template,还是在style 中,本地开发的时候都是可以正常显示的,但是你打包之后就显示图片找不到了。 解决方案,将所有静态资源都放入更目录的public 中,引入时 如果是template 中的 全部用根目录 方式引入

WeChat2fa9f4a5cf3e1b9d9f4f0c9a98122c04.png

如果是 style 里面的话需要用动态识别静态路径的方式了,动态引入的也一样

image.png

export const imgPath = (img: string) => { const url = location.origin + location.pathname; return url + img; };

原本是下面这种方式获取路径的,本地是没问题的,能够获取 import.meta.url 的值,但是打包后就获取不到了,所以用了上面那种简单的方法,有知道原因的小伙伴欢迎留言;

new URL(img, import.meta.url).href