vue 动态引入图片地址的方法

news2024/11/30 2:35:42

我们直接使用 v-bind 的方式导入无法正常导入

<image :src="item.src" alt=""/>

是因为 页面显示为html+css+js而vue变成我们可以看到的样子是需要打包变成html+css+js的,

在打包过程中将item.src的变量 取出变成/image/icon.svg只是 将地址过去当作静态资源了 然而在我们运行的127.0.0.1 的本机地址并没有image/icon.svg的资源所以无法使用

通过require方法

<image :src="require(item.src)"/>

这reuire方法动态加载地址

然而这个时候浏览器报错 找不到这个Cannot find module '1-icon.svg'

因为require可以导入资源和model模块 你的require无法识别这是个包还是个资源

最终解决办法:

我们只需要在前面加上一定的地址 就可以让require识别这是个资源而并非包 

<img  :src="require('./images/'+item.icon)"  alt=""/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/741245.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

集中式自动抄表系统原理与应用

集中式自动抄表系统是一种自动采集电表、水表、气表等计量数据的系统&#xff0c;其原理是通过一定的通信方式&#xff0c;将计量数据从表端传输到数据采集器&#xff0c;再由数据采集器上传至云端或后台处理系统&#xff0c;从而实现对表数据的自动采集、统计和分析。 集中式…

机器学习之随机森林(Random forest)

1 什么是随机森林 随机森林是一种监督式算法&#xff0c;使用由众多决策树组成的一种集成学习方法&#xff0c;输出是对问题最佳答案的共识。随机森林可用于分类或回归&#xff0c;是一种主流的集成学习算法。 1.1 随机森林算法原理 随机森林中有许多的分类树。我们要将一个输…

【Spring】使用注解读取和存储Bean对象

哈喽&#xff0c;哈喽&#xff0c;大家好~ 我是你们的老朋友&#xff1a;保护小周ღ 谈起Java 圈子里的框架&#xff0c;最年长最耀眼的莫过于 Spring 框架啦&#xff0c;本期给大家带来的是&#xff1a; 将对象存储到 Spring 中、Bean 对象的命名规则、从Spring 中获取bean …

解决github无法拉取submodule子模块的问题

引言 当使用git clone --recursive url 拉取一个配置了子模块的仓库后&#xff0c;会卡住。 同时在使用git clone 拉去https的url时&#xff0c;同样可能会出现一直卡在cloning int reposity...本文提供一个简单的脚本来解决该问题。 前置准备 需要配置好git的相关配置&…

今年第十个零日漏洞,苹果发布紧急更新

苹果于7月10日发布了新一轮快速安全响应 (RSR) 更新&#xff0c;以解决在攻击中利用的一个新零日漏洞。 苹果在iOS和macOS的更新公告中引用了一位匿名安全专家对该漏洞&#xff08;CVE-2023-37450&#xff09;的描述&#xff0c;表示“苹果已获悉有关此漏洞可能已被积极利用的…

自动化测试集成指南 -- 本地单元测试

构建本地单元测试 简介&#xff1a; 单元测试(Unit Test) 是针对 程序的最小单元 来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。一个单元可能是单个程序、类、对象、方法等。 如何区分单元测试和集成测试&#xff0c;一般情况下&#xff0c;单元测试应该不…

jacoco merge 合并代码覆盖率(同一个项目代码没有修改)

相关文章&#xff1a; jacoco代码覆盖率_jacoco覆盖率_做测试的喵酱的博客-CSDN博客 一、背景 前提&#xff1a; 同一个项目&#xff0c;代码没有修改的情况下&#xff0c;合并多个代码覆盖率&#xff0c;实现全量代码覆盖率。 java -jar jacococli.jar merge jacoco.exec …

PFC-34、PMO-78、HD3-AMPS比例控制阀放大器

比例驱动放大器 用于HD2-PS、HD3-PS、HD3-AMPS、HD3-PS8、HD5-PS、HD3-PMO、PMO-78、PRO-M24、AMF-RE、PFC-34、PFC-78、PFP3-78电磁比例阀 DIN 连接器安装 微控制器设计 独立调整&#xff08;斜坡上升 - 斜坡下降&#xff09; 3位LED显示屏 显示和调整实际值&#xff08…

转换成mp4格式的方法有哪些?分享两个给大家!

在数字化的世界中&#xff0c;我们经常需要处理各种格式的视频文件。MP4是一种非常常见的视频格式&#xff0c;由于其优秀的兼容性和较小的文件大小&#xff0c;它被广泛用于在线播放、视频编辑和共享。然而&#xff0c;我们可能会遇到一些非MP4格式的视频文件&#xff0c;这就…

YOLO V5 ROS功能包配置及运行(亲测可用、附ROS功能包源码)

一、 依赖项 1. Ubuntu 18.04 安装opencv 4.2.0/4.6.0链接&#xff1a; 查看当前opencv版本 pkg-config --modversion opencv 安装opencv 4.2.0链接&#xff1a; https://note.youdao.com/s/R6ddu2ou 2. 安装PyTorch 官网链接&#xff1a; https://pytorch.org/get-started…

美创科技获2023年杭州市总部企业认定

日前&#xff0c;2023年度杭州市总部企业认定名单新鲜出炉&#xff0c;美创科技被认定“2023年度杭州市总部企业”。 2023年度杭州市总部企业认定名单(排名不分先后) ‍为进一步扶持、培育和引进总部企业&#xff0c;积极打造全国一流总部经济中心&#xff0c;根据《关于推动杭…

vite性能优化提升开发体验之hmr和预编译

一、vite中的预编译 1. 预编译概念介绍 Vite&#xff0c;一个由Vue.js开发者尤雨溪开发的新型前端构建工具&#xff0c;主要利用了现代浏览器支持的ESM&#xff08;ES模块&#xff09;来进行快速开发。Vite在法语中意为“快”&#xff0c;其中最大的亮点就是其开发服务器启动…

gzyj 安全处理

目录 现场操作指导 解决方案 细节验证 4.1.1.1 4.1.1.2 4.1.1.3 4.1.1.4 4.1.1.5 4.1.2.1 4.1.2.2 4.1.2.3 4.1.2.4 4.1.2.5 4.1.3.1 4.1.3.2 4.1.3.3 4.1.3.4 技术支持可以仅看第一节即可。 现场操作指导 &#xff08;1&#xff09; 升级vms (2) 升级 meshview (3) nm…

从推动到拉动:研发效能提升的第一性原理

导语 |随着企业业务的快速发展&#xff0c;产品迭代速度越来越成为企业发展制胜的关键因素。在业务迅速扩张之下&#xff0c;企业研发团队的规模也在不断壮大。如何有效管理研发团队&#xff0c;又该如何提升企业研发效能&#xff0c;让企业在市场竞争中立于不败之地成为了一堂…

基础写作干货分享:微信公众号8个基本写作步骤

公众号怎么写&#xff1f;不知道如何下手&#xff1f;如何写一篇出众的公众号文章&#xff1f;怎么写公众号内容会出爆文&#xff1f;当我们涉及到基础微信公众号写作时不知道怎么写SEO教程自学网教你如何下手&#xff0c;八个基本写作步骤学会立马搞定困难。 确定目标受众&…

提高软件测试质量 需重点关注5个方面

在软件研发管理过程中&#xff0c;我们往往重视开发的进度&#xff0c;而对软件测试关注度不高&#xff0c;有些项目组甚至没有软件测试人员。这样往往容易导致测试工作出现很多问题&#xff0c;如测试目标不明确&#xff0c;不断修改测试方向&#xff1b;测试结果不理想&#…

Android11.0 导航栏添加图标截屏

需求&#xff1a; 导航栏添加截屏和电源键图标&#xff0c;控制截屏和用于设备重启关机功能。设置中添加延时截屏和控制截屏图标显示开关。 1. 导航栏添加图标 1.1 添加布局文件和图标icon 在layout目录下添加nav_power.xml和screenshot.xml文件 frameworks/base/packages…

远程桌面-出现身份验证错误

1. 打开本地组策略编辑器&#xff0c;可以按winr组合键输入gpedit.msc命令打开。 2. 选择“计算机配置”--“管理模板”--“系统”--“凭据分配”&#xff0c;在“凭据分配”设置中选择“加密数据库修正”。 3. 在“加密数据库修正”对话框中选择“已启动”&#xff0c;保护级别…

Redis解决Session共享问题

文章目录 一、集群Session共享问题二、Redis存储验证码和对象三、解决状态登录刷新问题 一、集群Session共享问题 session共享问题&#xff1a;多台Tomcat并不共享session存储空间&#xff0c;当请求切换到不同tomcat服务器时导致数据丢失的问题 tomcat可以进行多台tomcat进行…

主数据管理:识别主数据

1.识别主数据的两个方法 1.1主数据特征识别法 主要评估企业全部数据中的各类主数据是否符合主数据的每个特征&#xff0c;如发现任何不符合主数据特征的数据&#xff0c;则将其剔除出主数据管理的范畴。 高价值性&#xff1a;主数据具备极高的业务价值。主数据描述企业最核心的…