Vue 3 中，将静态资源（如图片）转换为 URL

yzhSWJ2025-03-12 21:29

这里使用了 Vite 或者 Vue CLI 等现代构建工具支持的特性。import ... from ... '?url' 这种语法实际上是一个导入请求(webpack或Vite等打包工具提供的功能)，它告诉打包工具你希望导入的是文件的 URL 而不是默认的文件内容。

javascript 复制代码

import appLogo from '../../assets/app-logo.png?url';

将会使得 appLogo 变量包含指向 ../../assets/app-logo.png 文件的 URL 路径，而不是该图片的二进制数据或其他形式的内容。这种方式非常适合于需要在样式或者直接在模板中使用图片URL的情况。

例如，你可以这样在组件的模板中使用它：

javascript 复制代码

<img :src="appLogo" alt="App Logo">

这样做的好处之一是能够利用构建工具对静态资源进行优化处理，比如压缩图片、缓存优化等，并且可以正确地解析路径，确保在不同部署环境下都能正确加载资源。