vite中动态引入图片，打包之后找不到图片地址？_vite打包图片路径问题

一般来说项目中我们集中存放图片，然后希望在页面中直接引入！
更好的就是直接在模板中调用一个函数 然后传入图片的名字就可以显示出来

事实上确实可以办到，我们用到了一个 new URL + import.meta.url这俩个东西

再src目录下 static 下创建一个images文件
/src/static/images
然后在/src/utils/mixin.js文件

const mixins = {
  useStaticImgUrl: (name) => {
      return new URL(`../static/images/${name}.png`, import.meta.url).href;
  },
};
1
2
3
4
5

注意URL里面不能是纯变量，那样就会报错了 详细的报错 你可以去试试看
然后在main.js中

import mixins from "./utils/mixin";
const app = createApp(App);
[Icon, Toast,Field, CellGroup,VanImage, Button, Checkbox, CheckboxGroup, List, Empty].forEach((item) => {
  app.use(item);
});
app.config.globalProperties = {
  ...mixins,
};
1
2
3
4
5
6
7
8

我们就可以在所有的组件模板中直接使用了

<div class="warn">
  <van-image
    round
    width="16"
    height="16"
    :src="useStaticImgUrl('warn')"
  />
</div>
1
2
3
4
5
6
7
8

不管是本地开发 还是打包之后都会找到具体的图片引入显示到页面中

关注我持续更新 前端知识