Vue 3 中,将静态资源(如图片)转换为 URL

这里使用了 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">

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

相关推荐
小约翰仓鼠8 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in10 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴26 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼33 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计1 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友1 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36781 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550402 小时前
初级程序员入门指南
javascript·python·算法
小小小小宇2 小时前
前端小tips
前端