开发一个h5项目，内部需要引入大量的自定义图标。

看到需要用到这么多图片，哪肯定不能像写一张图片一样写死，就写了一个js发所以得图片和对应的内容封装成一个json。

并且封装了一个图片引入的方法

如下：

js
复制代码

[
  {
    img:localImg("/flower/icon4.png"),
    title: "喜茶奈雪",
    tips: "低至7折",
  },
  {
    img: localImg("/flower/icon5.png"),
    title: "饿了么红包",
    tips: "天天领",
  },
  {
    img: localImg("/flower/icon6.png"),
    title: "高铁贵宾厅",
    tips: "3折起",
  }
  ]

js
复制代码

// 引入本地图片方法
export function localImg(file) {
   return new URL(`../assets/images${file}`,import.meta.url).href
}

一路都很顺畅，没有任何问题，然后我就迅速打包提测，想着终于可以摆会烂了。然而到了测试环境，所有图片都没有显示。

本地明明都可以了，然后哐哐的去打印日志，结果发现测试环境的图标地址都没有进行编译的。没有编译哪肯定是显示不了。

哪为啥没有进行编译呢，看文档里面是可以作为字符串进行传入的呀

打印图

vite文档图

哪就试了好几种方法

1. 把图片地址作为全路径进行传入
2. 用import.meta.glob()进行引入图片

都不太行。 最后按文档的方法，只传入图片名称作为变量，png都给他写上。 然后居然成功编译显示了。

后面试了几次居然发现传入的字符串最前面不能带入/, 我把/flower前面的斜杆移到images/后面就可以了

js
复制代码

[
  {
    img:localImg("flower/icon4.png"),
    title: "喜茶奈雪",
    tips: "低至7折",
  },
  {
    img: localImg("flower/icon5.png"),
    title: "饿了么红包",
    tips: "天天领",
  },
  {
    img: localImg("flower/icon6.png"),
    title: "高铁贵宾厅",
    tips: "3折起",
  }
  ]

// 引入本地图片方法
export function localImg(file) {
   return new URL(`../assets/images/${file}`,import.meta.url).href
}

源文：vite 引入本地图片遇到的坑

如有侵权请联系站点删除！