做母亲节网站的素材,最好用的搜索引擎排名,二手书店网站建设项目规划书,个人工作室项目在 Vue3 中加载图片#xff08;img#xff09;src地址时#xff0c;出现无法加载问题。网上很多都建议使用 require 加载相对路径#xff0c;如下#xff1a; img :srcrequire(../assets/img/icon.jpg)/但是按照这种方式加载又会报错如下#xff1a;…在 Vue3 中加载图片imgsrc地址时出现无法加载问题。网上很多都建议使用 require 加载相对路径如下 img :srcrequire(../assets/img/icon.jpg)/但是按照这种方式加载又会报错如下
require is not defined原因
Vue3 的 vite 打包中没有 requireVue低版本是支持require的。
这是因为Vue3早期的低版本采用的还是webpack打包工具。webpack里面是有require的也是支持require的。
解决方案
使用import解决但是又不能直接用需要使用到new URL如下
function targetUrl(name) {return new URL(../${name}.png, import.meta.url).href
}templatedivimg v-forroute in routes :srctargetUrl(route.icon) :altroute.name //div
/templatescript setupconst routes ref([{ name: page1, icon: icon1 },{ name: page2, icon: icon2 },]);function targetUrl(name) {return new URL(../assets/img/${name}.png, import.meta.url).href;}
};
/script
