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;},
};

注意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,
};

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

<div class="warn"><van-imageroundwidth="16"height="16":src="useStaticImgUrl('warn')"/>
</div>

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

关注我持续更新 前端知识