一，将图片资源放入public目录下

 

let myIcon = new BMap.Icon("/map_pin_red.png", new BMap.Size(21, 30));

我们看到实际上我们不希望资源文件被vite编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。

public 目录# 如果你有下列这些资源： 不会被源码引用（例如 robots.txt） 必须保持原有文件名（没有经过 hash） ...或者你压根不想引入该资源，只是想得到其 URL。 那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。 目录默认是 <root>/public，但可以通过 publicDir 选项 来配置。 请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。 public 中的资源不应该被 JavaScript 文件引用。

vite对官方public目录介绍 public目录

二，是将图片放入assets目录下

错误引入方式：使用了@符合解析路径，发现根本解析不了。生产环境，开发环境统统无效。

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');
}