vue3+vite assets动态引入图片的方式

最新推荐文章于 2025-04-14 09:58:14 发布

想吃天鹅的青蛙

最新推荐文章于 2025-04-14 09:58:14 发布

阅读量3.3k

点赞数 4

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46406211/article/details/134870441

版权

文章讲述了Vite框架中关于资源文件（如图片）在默认配置下，如何正确处理开发环境和打包后的不同引用方式。重点介绍了使用import.meta.url和newURL来动态获取并处理静态资源URL的方法，以及注意事项，如SSR不支持的情况。

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

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题

一、静态文件放public下

很多小伙伴会将图片放到assets文件夹，例如：src/assets/images/，我们在文件夹里面放入一张图片名称叫做：arrow.png 所以文件里面就是这样子 src/assets/images/arrow.png

<img :src="require('@/assets/images/arrow.png')" />

尝试过require动态引入，发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法\

二、（适用于处理单个链接的资源文件）

import arrow from '@/assets/images/arrow.png' <img :src="arrow" />

三、（适用于处理多个链接的资源文件）

Vite官方文档处理图片链接https://cn.vitejs.dev/guide/assets#new-url-url-import-meta-url

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！

这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href

注意：无法在 SSR 中使用

如果你正在以服务端渲染模式使用 Vite 则此模式不支持，因为 `import.meta.url` 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。

具体的使用方法：

首先在utils 里面创建一个自己的方法：getUrls.ts

//getUrl.ts
// 获取assets静态资源
export const getAssetsFile = (urlName: string) => {
  console.info("====", urlName);
  console.info("url", import.meta.url);
  console.info("url2", new URL(`../../assets/${urlName}`, import.meta.url));
  return new URL(`./assets/${urlName}`, import.meta.url).href;
};

然后看一眼文件夹的路径

具体使用：

 import { getAssetsFile } from "@/utils/imageUrl/getUrl";

然后链接路径进行替换就好。