在vue3+vite中，为跑马灯引入一组图片时，＜img :src=“img“ alt=““/＞，绑定的图片路径好像没有生效？发现图片不显示怎么办？

星~星~

于 2024-02-01 17:12:01 发布

阅读量482

点赞数 7

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_71108480/article/details/135978222

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讲述了在Vue的export中，由于data里的路径被视为普通字符串，导致动态变量传入的图片URL无法识别。解决方案是引入require方法，将src变量转换并返回处理后的URL。Vite的assets指南和public目录也有所提及。

摘要由CSDN通过智能技术生成

原因：因为Vue的export中的data中的路径只会被当做普通的字符串，因此无法获取图片

即除非是绝对路径或相对路径图片可以识别，如果是变量传参，则无法读取对应的url

解决方法：

引入require方法，将传递src的变量包裹起来，既可以读取到图片

如果发现没有require，导入即可

export const require = (imgPath) => {
    try {
      const handlePath = imgPath.replace('@', '..');
      // https://vitejs.cn/guide/assets.html#the-public-directory
      return new URL(handlePath, import.meta.url).href;
    } catch (error) {
      console.warn(error);
    }
  };