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什么的都可以,随意- 但是 ...
随机推荐
- Burp Suite安装
1.Burpsuite简介 Burp Suite是一款集成化的渗透测试工具,包含了很多功能,可以帮助我们高效地完成对Web应用程序的渗透测试和攻击. Burp Suite 由Java语言编写,基于J ...
- 【深入浅出 Yarn 架构与实现】4-2 RM 管理 Application Master
上一篇文章对 ResourceManager 整体架构和功能进行了讲述.本篇将对 RM 中管理 Application Master 的部分进行深入的讲解. 下面将会介绍 RM 与 AM 整体通信执行 ...
- Go语言与其他高级语言的区别
概述: go语言与其他语言相比,go语言的关键字非常少,只有25个,c语言有37个,c++有84个,python有33个,java有53个. 差异1:go语言不允许隐式转换,别名和原有类型也不能进行隐 ...
- WCH沁恒 CH37系列芯片选型以及常见问题的处理(CH376/CH378)
选型 型号 接口 功能 备注 电源 CH372 并口 USB_Device 全速 USB 设备接口,兼容 USB V2.0 3.1-3.6 4.2-5.4 CH374 SPI/并口 Host/Devi ...
- openEuler 部署Kubernetes(K8s)集群
前言 由于工作原因需要使用 openEuler,openEuler官方文档部署K8s集群比较复杂,并且网上相关资料较少,本文是通过实践与测试整理的 openEuler 22.03 部署 Kuberne ...
- [OpenCV实战]26 基于OpenCV实现选择性搜索算法
目录 1 背景 1.1 目标检测与目标识别 1.2 滑动窗口算法 1.3 候选区域选择算法 2 选择性搜索算法 2.1 什么是选择性搜索? 2.2 选择性搜索相似性度量 2.3 结果 3 代码 4 参 ...
- [C++]C++11右值引用
右值引用的概念(摘自C++Primer) 左值和右值的概念 1.左值和右值是表达式的属性,一些表达式要求生成左值,一些表达式要求生成右值:左值表达式通常是一个对象的身份,而一个右值表达式表示的是对象的 ...
- SwiftUI(一)
macOS 11.4 Xcode 12.5.1 1.新建工程,创建一个swiftui文件 2.创建后有些画布是在下面显示的 3.先来看下效果图 4. CardImageView.swi ...
- JavaScript 浅拷贝和深拷贝
JavaScript 中的拷贝分为两种:浅拷贝和深拷贝. 一.浅拷贝 浅拷贝是指在拷贝过程中,只拷贝一个对象中的指针,而不拷贝实际的数据.所以,浅拷贝中修改新对象中的数据时,原对象中的数据也会被改变. ...
- py之循环,函数
循环 a=1 while a<10: print(a) a+=1 a=[123,1235,123124,1231] while a: a1=a.pop() print(a1) for a1 in ...