当前位置:   article > 正文

vite引入本地静态资源图片踩坑_return new url(``, import.meta.url).href图片展示不出来

return new url(``, import.meta.url).href图片展示不出来

使用vite+vue3进行开发,遇到需要引入本地图片,按照百度上比较主流的方式使用new URL()来处理,但是图片一直不展示,url一直为undefined,代码如下

  

经过调试发现是'/'的问题,将上面的js代码改为

  1. export function requireAssetsImg(url) {
  2. console.log(url, '传入的路径');
  3. console.log(`../assets/${url}`, '拼接后的路径');
  4. console.log(import.meta.url, 'import.meta.url');
  5. // return new URL(`../assets${url}`, import.meta.url).href;
  6. return new URL(`../assets/${url}`, import.meta.url).href;
  7. }
  8. <img :src="requireAssetsImg('chat-ai-avatar.png')" alt="" />

目前解决了问题但还是不知道为什么一个'/'会造成这个问题,希望有知道的大佬在评论区交流下!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/86397
推荐阅读
相关标签
  

闽ICP备14008679号