let myIcon = new BMap.Icon("/map_pin_red.png", new BMap.Size(21, 30));
我们看到实际上我们不希望资源文件被vite编译可以把图片放到public 目录会更省事,不管是开发环境还是生产环境,可以始终以根目录保持图片路径的一致。
public 目录# 如果你有下列这些资源: 不会被源码引用(例如 robots.txt) 必须保持原有文件名(没有经过 hash) ...或者你压根不想引入该资源,只是想得到其 URL。 那么你可以将该资源放在指定的 public 目录中,它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。 目录默认是
/public,但可以通过 publicDir 选项 来配置。 请注意: 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。 public 中的资源不应该被 JavaScript 文件引用。
vite对官方public目录介绍 public目录
错误引入方式:使用了@符合解析路径,发现根本解析不了。生产环境,开发环境统统无效。
let mapPicSrc = new URL(`@/assets/img/mapImg/map_pin_${item.icon}.png`, import.meta.url).href;
myIcon = new BMap.Icon(mapPicSrc, new BMap.Size(21, 30));
访问路径如下:404
第一种方式:正确使用方式:(但是这种方式适用于单个链接的资源文件)
import mapImg from '@/assets/img/mapImg/map_pin_red.png'
let myIcon = new BMap.Icon(mapImg, new BMap.Size(21, 30));
console.log(mapImg)
开发环境下结果为: /src/assets/img/mapImg/map_pin_red.png
浏览器访问的地址为:http://localhost:8081/src/assets/img/mapImg/map_pin_red.png
生产环境下:经过vite打包,我发现小的图片解析为base64
第二种方式(适用于处理多个链接的资源文件)
推荐,这种方式传入的变量可以动态传入文件路径!!
new URL() + import.meta.url
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用。
在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:(相对路径一定要写正确,当前引入图片的文件,相对图片的位置)
let mapPicSrc = new URL(`../../../assets/img/mapImg/map_pin_${item.icon}.png`, import.meta.url).href;
开发环境下,解析得到的路径为:
//解析得到的路径为: http://localhost:8081/src/assets/img/mapImg/map_pin_purl.png
生产环境下:经过vite打包,我发现小的图片解析为base64
补充:如果是背景图片引入的方式(一定要使用相对路径)
.imgText {
background-image: url('../../assets/images/1462466500644.jpg');
}
生产环境会自动加上hash,并且路径正确。
以下错误用法,使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确
.imgText {
background-image: url('src/assets/images/1462466500644.jpg');
}