当前位置: 首页 > article >正文

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

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

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

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

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

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

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

 


http://www.kler.cn/a/582257.html

相关文章:

  • Orale数据文件加错位置,你直接rm引发的故障
  • 【RAG】RAG 系统的基本搭建流程(ES关键词检索示例)
  • maven的项目构建
  • Web3.0 从入门到实战:一站式开发指南
  • 在MATLAB中实现PID控制仿真
  • Vue3——Fragment
  • MVCC实现原理
  • Express + MongoDB 实现登录验证码
  • 【踩坑记录】MAC M4 mini 系统初始化
  • Express + MongoDB + multer 解决文件上传 originalname 中文乱码
  • 量子计算如何颠覆能源优化领域:从理论到实践
  • 02C#基本结构篇(D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句)
  • TinyVue 的 DatePicker 组件支持日期面板单独使用啦!
  • 在虚拟机VMware上安装CENTOS7-图文教程
  • ES Filter Query 区别
  • QT系列教程(20) Qt 项目视图便捷类
  • 界面控件Kendo UI for Vue 2024 Q4亮点 - 增强图表的数据模板、导航功能
  • 表、索引统计信息锁定和解锁
  • Burpsuite使用笔记
  • Windows控制台函数:控制台读取输入函数ReadConsoleA()