如何为Mapbox Marker添加自定义图片？src不加载、Vue:src被渲染为字符串如何解决？

问题根因 #

• 直接在innerHTML中写../../assets/FuelPin.png相对路径无效：Vue的构建工具（Vite/Webpack）打包时会对assets目录下的静态资源做哈希重命名、路径转换，运行时的实际路径和开发时的相对路径不匹配。
• :src语法不生效：:src是Vue模板专属的指令语法，原生innerHTML属性只会把内容当作普通字符串渲染，不会触发Vue的指令解析逻辑。

可用解决方案 #

方案1：提前import引入图片资源（通用，适配所有构建工具） #

在组件script顶部先导入目标图片，构建工具会自动处理为正确的运行时路径，直接拼入innerHTML字符串即可：

// 顶部导入图片
import FuelPin from '../../assets/FuelPin.png'

// 创建marker逻辑
const marker = document.createElement('div');
marker.innerHTML = `<img src="${FuelPin}" style="height: 56px; width: 44px" alt=""/>`;

new mapboxgl.Marker(marker)
    .setLngLat(lngLatPopup)
    .addTo(this.map);

方案2：public目录托管图片 #

把FuelPin.png放到项目的public目录下（如果分类管理可以新建public/images子目录），public目录的资源打包时会原样拷贝到输出根目录，直接用根绝对路径引用即可：

const marker = document.createElement('div');
// 假设图片放在public/images/FuelPin.png
marker.innerHTML = `<img src="/images/FuelPin.png" style="height: 56px; width: 44px" alt=""/>`;

new mapboxgl.Marker(marker)
    .setLngLat(lngLatPopup)
    .addTo(this.map);

方案3：Vite环境动态拼接路径 #

如果用Vite构建且图片路径需要动态生成，可以用new URL处理路径：

const imgUrl = new URL('../../assets/FuelPin.png', import.meta.url).href
const marker = document.createElement('div');
marker.innerHTML = `<img src="${imgUrl}" style="height: 56px; width: 44px" alt=""/>`;

内容的提问来源于stack exchange，提问作者ChaiM09