vite 动态加载静态资源图片，修复打包后图片404问题。

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

TangAcrab

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

阅读量1.6k

点赞数

分类专栏： vue 文章标签：前端 vite 动态加载图片

本文链接：https://blog.csdn.net/weixin_39786582/article/details/125875205

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vite项目中动态获取并加载静态资源图片，通过`new URL`方法结合`import.meta.url`，实现图片路径的动态解析，确保图片能够正确引用。适用于前端开发人员在构建应用时处理动态资源的需求。

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

1、解决。使用 new URL

/***
 * @description vite动态加载静态资源图片
 * @params string name - 图片名称
 */
export const dynamicGetImg = (name: string) => {
  try {
    return new URL(`../assets/menu-icon/${name}`, import.meta.url).href
  } catch (error) {
    console.log(error)
  }
}