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什么的都可以,随意- 但是 ...
随机推荐
- 把时间沉淀下来 | Kagol 的 2022 年终总结
现代管理学之父德鲁克在其经典著作<卓有成效的管理者>中对时间有一段精妙的论述,其要点如下: 时间是一项限制因素,任何生产程序的产出量,都会受到最稀有资源的制约,而时间就是其中最稀有的资源. ...
- Vuex极速入门
01.什么是Vuex? 1.1.为什么需要状态管理? 在复杂的系统中,我们会把系统按照业务逻辑拆分为多个层次.多个模块,采用组件式的开发方式.而此时不同模块.父子模块之间的通信就成了一个问题. 为了解 ...
- 【机器学习】李宏毅——自注意力机制(Self-attention)
前面我们所讲的模型,输入都是一个向量,但有没有可能在某些场景中输入是多个向量,即一个向量集合,并且这些向量的数目并不是固定的呢? 这一类的场景包括文字识别.语音识别.图网络等等. 那么先来考虑输出的类 ...
- 使用WPF或AspNetCore创建简易版ChatGPT客户端,让ChatGPT成为你的私人助理
前言:前一天写的一个ChatGPT服务端,貌似大家用起来还不是那么方便,所以我顺便用WPF和AspNetCore的webapi程序做个客户端吧,通过客户端来快速访问chatgpt模型生成对话. 1 ...
- 微信小程序地区和location_id对应关系
点击查看代码 location_list = [ {'location_id': '101010100', 'location_name': ['北京', '北京', '北京']}, {'locati ...
- CH9126常见问题解决(持续更新)
1. 有关CH9126时区的问题 答:当CH9126作为SNTP服务器的时候,通过串口设置的时间为东八(北京)时区的绝对时间.但是如果是Windows向CH9126SNTP服务器要时间,那么Ch912 ...
- 物以类聚人以群分,通过GensimLda文本聚类构建人工智能个性化推荐系统(Python3.10)
众所周知,个性化推荐系统能够根据用户的兴趣.偏好等信息向用户推荐相关内容,使得用户更感兴趣,从而提升用户体验,提高用户粘度,之前我们曾经使用协同过滤算法构建过个性化推荐系统,但基于显式反馈的算法就会有 ...
- ArcGIS工具 - 按要素裁切数据库
在GIS处理数据中,经常需要分图,将整个任务区划分成若干块,由不同的人协作完成.为了节省分图裁切时间,减少人员操作失误,为源GIS专门制作了按要素裁切数据库工具,以提高数据生产效率. 需求描述 裁切单 ...
- TensorRT基础笔记
一,概述 TensorRT 是 NVIDIA 官方推出的基于 CUDA 和 cudnn 的高性能深度学习推理加速引擎,能够使深度学习模型在 GPU 上进行低延迟.高吞吐量的部署.采用 C++ 开发,并 ...
- 一个小而美的 C 语言项目
我最近在学习 C 语言,看的一本书叫做 <C Primer Plus>,这本书对 C 语言的描写.特性介绍.代码示例都介绍的比较详细,是小白入门 C 语言非常不错的一本书,还有一本经典书叫 ...