vite2+vue3引入动态图片报错404问题

最新推荐文章于 2024-08-06 16:53:32 发布

帅哥语塞

最新推荐文章于 2024-08-06 16:53:32 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue vite 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/attach_uzi/article/details/125056172

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

vite

1 篇文章

订阅专栏

本文探讨了Vite打包过程中如何处理config.js中@符号的配置，如何正确引用动态路径，包括使用根目录、绝对路径和newURL方法。重点在于动态引入时避免解析@符号的技巧和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现这一问题大致可以归结为，vite打包的时候会忽略config.js文件中配置的@ 相当于src这么一说，

// vite.config.js
... 
resolve: {
    alias: {
      "~": path.resolve(__dirname, './'),
      "@": path.resolve(__dirname, 'src')
    }
  },
...

静态图片路径是相对路径还是绝对路径都可以，相当于写死静态文件地址，

<img src="@/assets/img/common/pokemon/other_imgs/bg.png" alt="" />

方法一：动态图片的话，把@换成根目录开始就可以展示了

<img 
v-lazyload="`/src/assets/img/${item.file_name)}`" alt="" class="pokemon-list--box__img" >

方法二：利用new URL（）方法即可

// 动态获取src
const getImageUrl = (item) => {
  /* 
  new URL (url, [base])
    url —— 完整的 URL，或者仅路径（如果设置了 base），
    base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL

    其实不管是用new URL方法还是动态:src 都明白了一点，动态地址 不解析 打包配置的 @符号，要么../ 要么/src 
  */
  return  =  new URL(`../../../assets/img/${item.file_name)}`,import.meta.url)
};

总结：如果在动态引入的时候，直接使用根目录或者是绝对路径，不用配置替换符@即可！