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什么的都可以,随意- 但是 ...
随机推荐
- 你的项目使用Optional了吗?
1.基本概念 java.util.Optional<T>类本质上就是一个容器,该容器的数值可以是空代表一个值不存在,也可以是非空代表一个值存在. 2.获取对象 2.1 相关方法 2.2 案 ...
- Vue DevUI v1.4 版本发布:从体验、效率、质量三个方面做了全方位的优化🎉
2022年9月1日,我们正式宣布 Vue DevUI 组件库发布 v1.0 版本. Vue DevUI 1.0 正式发布 经过100多天的持续迭代,我们正式发布 v1.4.0 版本,共新增: 11位贡 ...
- day04-功能实现03
家居网购项目实现03 8.功能07-后台管理 显示家居 8.1需求分析/图解 给后台管理提供独立登录页面,管理员登录地址不对外公开 管理员登录成功后,显示管理菜单页面 管理员点击家居管理,显示所有家居 ...
- nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应
最近一个需要用nuxt框架实现的pc自适应项目,从网上找了很多资料,最终完美实现 一.下载相关插件 npm i lib-flexible -Snpm i px2rem-loader -Dnpm ins ...
- git remote update origin --prune命令失败
1.问题描述 我使用git remote update origin --prune命令更新远程分支上的代码,结果出现如下报错. 2.产生原因 本地关联的远程仓库失效了,需要重新再关联一下. 3.解决 ...
- [OpenCV实战]52 在OpenCV中使用颜色直方图
颜色直方图是一种常见的图像特征,顾名思义颜色直方图就是用来反映图像颜色组成分布的直方图.颜色直方图的横轴表示像素值或像素值范围,纵轴表示该像素值范围内像素点的个数或出现频率.颜色直方图属于计算机视觉中 ...
- CentOS7下搭建JumpServer
JumpServer 部署架构图 JumpServer 功能架构图 JumpServer 是广受欢迎的开源堡垒机,是符合 4A 规范的专业运维安全审计系统. JumpServer 使用 Python ...
- [Leetcode]设计链表
题目 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链表,则还需要一 ...
- RSA非对称加密算法浅析
说起加密算法,大的分类上,常规区分通常会区分为对称加密与非对称加密两种,两种算法都各有优缺点.然而互联网发展到今天,应用更广的还是非对称加密的方式,而非对称加密中,RSA又首当其中,被广泛运用到各类应 ...
- Vue导出模板、使用前端js办法导出表格数据、导入表格前端读取表格数据、导入表格发送后端读取数据
以下是几种用的较多的函数方法,可以参考使用. // 導出1 myExport() { // post請求文件寫法1 const url = 'http://XXXX/XXXX/XXXX/XXXX' c ...