vue中引入静态图片
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. 使用
vue中引入静态图片的更多相关文章
- Vue中引入静态JS文件(爬坑)
前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...
- vue中显示静态图片怎么引用
有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- 【jsp】怎么在jsp文件中引入静态文件(.js .css)
如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...
- vue中引入json数据,不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误
在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...
- vue-cil和webpack中本地静态图片的路径问题解决方案
1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...
随机推荐
- 《MySQL必知必会》之事务、用户权限、数据库维护和性能
第二十六章 管理事务处理 本章介绍什么是事务处理以及如何利用COMMIT和ROLLBACK语句来管理事务处理 事务处理 并非所有数据库引擎都支持事务处理 常用的InnoDB支持 事务处理可以用来维护数 ...
- Linux NTP工具的基本使用
NTP 时间同步 NTP(Network Time Protocol)协议,网络时间协议.利用ntp协议可以实现网络中的计算机时间同步. 实现NTP协议的工具: ntpdate:只能同步一次时间 nt ...
- java顺序数组插入元素
本文主要阐明已知顺序数组,在数组中插入一个数据元素,使其仍然保持有序. 关键是寻找num在原数组中插入的位置: 当num在原数组中是最大的情况,num应该插入到原数组的末尾. 否则,应该遍历原数组,通 ...
- 5、Idea同时选择多处光标进行编辑
1.按住Alt+Shift,然后用鼠标左键点击文本,可以让光标在多个位置出现2.每个光标都会同时输入你正在输入的文本3.ESC退出 搜索 复制
- [python] Python二维码生成器qrcode库入门
Python二维码生成器qrcode库入门 qrcode是二维码生成的Python开源库,官方地址为python-qrcode.所有代码见:Python-Study-Notes. 文章目录 Pytho ...
- HBase详解(04) - HBase Java API使用
HBase详解(04) - HBase Java API使用 环境准备 新建Maven项目,在pom.xml中添加依赖 <dependency> <groupId>org.ap ...
- Windows 平台计算 CPU 总利用率
利用 GetSystemTimes 可以获得 Windows 系统的 Idle Time. Kernel Time 和 User Time.Idle Time 是系统空闲的时间,也就是系统没有利用的时 ...
- 【带你读论文】向量表征经典之DeepWalk
摘要:详细讲解DeepWalk,通过随机游走的方式对网络化数据做一个表示学习,它是图神经网络的开山之作,借鉴了Word2vec的思想. 本文分享自华为云社区<[论文阅读] (25) 向量表征经典 ...
- 【深入浅出Seata原理及实战】「入门基础专题」带你透析认识Seata分布式事务服务的原理和流程(1)
分布式事务的背景 随着业务的不断发展,单体架构已经无法满足我们的需求,分布式微服务架构逐渐成为大型互联网平台的首选,但所有使用分布式微服务架构的应用都必须面临一个十分棘手的问题,那就是"分布 ...
- BOM操作、DOM操作、jQuery类库
BOM操作.DOM操作.jQuery类库 一.BOM操作 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行对话 1.window对象 浏 ...