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

最新推荐文章于 2024-09-29 10:49:54 发布

帅哥语塞

最新推荐文章于 2024-09-29 10:49:54 发布

阅读量2.2k

点赞数 1

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

本文链接：https://blog.csdn.net/attach_uzi/article/details/125056172

版权

vue 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

vite

1 篇文章 0 订阅

订阅专栏

出现这一问题大致可以归结为，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)
};

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