vue中引入静态图片
2024-09-08 17:15:53
vue+webpack中,可以使用require
imageList: [
{
url: require('../image/pig.png')
}
]
vue+vite没有require方法
// 静态图片一般放在src/assets下面 1. 单个文件
import pig from '@/assets/images/pig.png' <img :src="pig " /> 2. 多个文件 new URL() + import.meta.url
vite文档: https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
1. 在utils中创建一个方法getImage.js
// 获取assets静态资源
const getAssetsFile = (url) => {
return new URL(`../assets/deliveryStrategyImages/${url}`, import.meta.url).href;
};
export default getAssetsFile;
2. 使用
import getAssetsFile from '@/utils/getImage';
iconImg: [
{
img: getAssetsFile('oneDeployment.svg'),
},
最新文章
- canvas初探2
- 教你一招:win 7 或win 10右键菜单 添加获取管理员权限
- node.js基础 1之 Querystring参数处理小利器
- SpringMVC学习--数据回显
- Asp.net Request方法获取客户端的信息
- JVM剖析
- LINUX怎么修改IP地址
- Object-c学习之路十一(NSDate和反射)
- Beautiful Soup常见的解析器
- ES6参数默认值
- Codeforces 1110D Jongmah [DP]
- OfficeOpenXml:World、Excel导出导入库
- selenium.common.exceptions.WebDriverException: Message: unknown Error: cannot find Chrome binary
- Oracle SQL: DDL DML DCL TCL
- FreeMaker使用HashMap
- select 语法
- uni-app,wex5,APPcan,ApiCloud几款国内webapp开发框架的选型对比
- js之 data-*自定义属性
- Django初级手册6-静态文件
- MySQL千万级大表优化解决方案
热门文章
- MySQL基础知识(二)-超详细 Linux安装MySQL5.7完整版教程及遇到的坑
- jQuery事件与动态效果
- python连接MySQL数据库实现(用户登录测试功能)pymysql
- 使用 SmartIDE 开发golang项目
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) - Flask表单的实现
- 搭建漏洞环境及实战——搭建XSS测试平台
- java中的静态属性和静态方法
- 红袖添香,绝代妖娆,Ruby语言基础入门教程之Ruby3基础语法,第一次亲密接触EP01
- android studio 写一个桌球简单页面
- C++11(列表初始化+变量类型推导+类型转换+左右值概念、引用+完美转发和万能应用+定位new+可变参数模板+emplace接口)