img标签src动态绑定资源失败问题

img标签src动态绑定资源失败问题

需要采用require的方式进行

在 Vue 中,require 是一个通用的模块加载函数,用于在运行时(客户端或服务器端)引入模块。它通常用于加载 JavaScript 文件、JSON 数据、静态资源等。

组件使用: 

 <MyBox :mapIcon="require('./../../assets/images/'imgSrc+'.png')"></MyBox >

组件代码:

  <img class="primary" :src="mapIcon" :alt="mapTitle" />

此时就可以实现正常的访问指定路径下的静态资源了。

原先的时候直接

  <img class="primary" src="../assert/images/xx.png" :alt="mapTitle" />

采用路径的形式就可以直接访问到对应的图片,但是现在采用动态绑定的时候路径的图片直接就是一个地址,不是一个base64的资源信息,需要采用上面的require进行资源的导入。

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

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

相关文章

6.01 定时任务,关闭超时订单

步骤1&#xff1a;创建定时任务类 import com.imooc.service.OrderService; import com.imooc.utils.DateUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.s…

mysql在Ubuntu中新增用户配置

打开终端&#xff08;Terminal&#xff09;。 使用超级用户权限登录到 MySQL 服务器。如果您知道MySQL的root用户密码&#xff0c;可以运行以下命令并输入密码&#xff1a; sudo mysql -u root -p 如果您没有设置MySQL root密码&#xff0c;可以直接使用以下命令登录&#xff…

读书笔记--未来简史关键金句和阅读感悟

借着国庆假期&#xff0c;终于有时间研读了尤瓦尔.赫拉利的《未来简史》&#xff0c;作者的写作方式、文笔、观察视角都是我喜欢的类型&#xff0c;作者从古到今&#xff0c;谈到了上帝、神、宗教、科技、生物、智人到未来的超人智神&#xff08;数据主义&#xff09;&#xff…

Elasticsearch:时间点 API

Elasticsearch&#xff1a;时间点 API-CSDN博客 在今天的文章中&#xff0c;我将着重介绍 Point in time API。在接下来的文章中&#xff0c;我将介绍如何运用 PIT 来对搜索结果进行分页。这也是被推荐使用的方法。 Point in time API 默认情况下&#xff0c;搜索请求针对目标…

水波纹文字效果动画

效果展示 CSS 知识点 text-shadow 属性绘制立体文字clip-path 属性来绘制水波纹 工具网站 CSS clip-path maker 效果编辑器 页面整体结构实现 使用多个 H2 标签来实现水波纹的效果实现&#xff0c;然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。 <div …

Android 使用 registerForActivityResult() 打开系统相册或相机获取图像

一、简介 当使用了 AndroidX 后&#xff0c;发现 startActivityForResult() 标记为过时了&#xff0c;而是推荐我们使用 registerForActivityResult() 函数。 registerForActivityResult() 函数是 Android 中用于启动 Activity 结果回调的新方式。这个函数的目的是简化在 Act…

CSS基础语法之盒子模型

目录 一、 选择器 1.1 结构伪类选择器 1.1.1基本使用 1.1.2 :nth-child(公式) 1.2 伪元素选择器 二、 PxCook 三、盒子模型 3.1 盒子模型-组成 3.2 边框线 3.2.1四个方向 3.2.2 单方向边框线 3.3 内边距 3.4 尺寸计算 3.5 外边距+版心居中 3.6 清除默认样式 3.7…

11.3 读图举例

一、低频功率放大电路 图11.3.1所示为实用低频功率放大电路&#xff0c;最大输出功率为 7 W 7\,\textrm W 7W。其中 A \textrm A A 的型号为 LF356N&#xff0c; T 1 T_1 T1​ 和 T 3 T_3 T3​ 的型号为 2SC1815&#xff0c; T 4 T_4 T4​ 的型号为 2SD525&#xff0c; T 2…

【从0开始配置前后端项目】——Docker环境配置

1. 准备一台纯净的服务器 镜像&#xff1a;CentOS 7.9 64位 CPU & 内存&#xff1a;2核2G 系统盘&#xff1a;60GB 峰值带宽&#xff1a;30Mbps 流量包&#xff1a;600GB / 600GB 2. 安装Docker 2.1 卸载旧的版本 $ sudo yum remove docker \docker-client \docker-cl…

前端笔试题总结,带答案和解析(一)

1. 执行以下程序&#xff0c;输出结果为&#xff08;&#xff09; var x 10; var y 20; var z x < y ? x:y; console.log(xx;yy;zz);A x11;y21;z11 B x11;y20;z10 C x11;y21;z10 D x11;y20;z11 初始化x的值为10&#xff0c;y的值为20&#xff0c;x < y返回结果为tru…

【ONE·Linux || 多线程(二)】

总言 多线程&#xff1a;生产者消费者模型与两种实现方式&#xff08;条件变量、信号量&#xff09;、线程池。 文章目录 总言4、生产者消费者模型4.1、基本概念4.2、基于BlockingQueue的生产者消费者模型&#xff08;理解条件变量&#xff09;4.2.1、单生产者单消费者模式&am…

【juc】countdownlatch实现游戏进度

目录 一、截图示例二、代码示例 一、截图示例 二、代码示例 package com.learning.countdownlatch;import java.util.Arrays; import java.util.Random; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurr…

爱普生LQ1900KIIH复位方法

爱普生EPSON 1900KIIH是一部通用针式打印机&#xff0c;136列&#xff08;10cpi下&#xff09;的打印宽度&#xff0c;缓冲区128KB&#xff0c;打印速度为270字/秒。 打印机类型 打印方式&#xff1a;24针击打式点阵打印、打印方向&#xff1a;双向逻辑查找、安全规格标准&am…

Dubbo-CVE-2020-1948

APache Dubbo简介 Dubbo是一个分布式服务框架&#xff0c;致力于提供高性能和透明化的RPC远程服务调用方案&#xff0c;以及SOA服务治理方案。简单的说&#xff0c;dubbo就是个服务框架&#xff0c;如果没有分布式的需求&#xff0c;其实是不需要用的&#xff0c;只有在分布式…

云计算基础:理解AWS、Azure和Google Cloud

云计算基础&#xff1a;理解AWS、Azure和Google Cloud 介绍 云计算已经成为现代科技领域的重要驱动力之一。它为企业提供了灵活性、可伸缩性和成本效益&#xff0c;以满足日益增长的计算和存储需求。本文将深入探讨三个主要的云计算提供商&#xff1a;Amazon Web Services (A…

【GIT版本控制】--GIT的基本概念

当学习GIT的基本概念时&#xff0c;理解仓库&#xff08;Repository&#xff09;、提交&#xff08;Commit&#xff09;、分支&#xff08;Branch&#xff09;和合并&#xff08;Merge&#xff09;是至关重要的。这些是IT的核心概念&#xff0c;对于有效使用GIT非常关键。 一、…

人体姿态标注

人体姿态标注 一 标注工具labelme1.1 安装方式1.2 界面说明 二 数据集准备以下每张图片的命名方式&#xff1a;状态_学号_序号.jpg (注意 一定是jpg格式) 保存到一个文件夹中&#xff0c;便于标注。 例如&#xff1a;FALL_0000_0001.jpg 站立数据(UP)&#xff1a;不同方向&…

MySQL增删查改(进阶1)

一、数据库约束 约束&#xff1a;按照一定条件进行规范的做事&#xff1b; 表定义的时候&#xff0c;某些字段保存的数据需要按照一定的约束条件&#xff1b; 1.null约束 字段null&#xff1a;该字段可以为空&#xff1b;not null&#xff1a;该字段不能为空不指定的话就是…

优优嗨聚集团:OTC药品能否纳入报销成为各方关注焦点,对OTC医疗有何影响

随着医疗费用的不断上涨&#xff0c;各方对于非处方药&#xff08;OTC&#xff09;能否纳入报销的关注度也在不断提升。OTC药品是指无需医生处方即可购买的药品&#xff0c;具有方便快捷、安全有效的特点。然而&#xff0c;对于是否将OTC药品纳入报销范围&#xff0c;各方看法不…

NewStarCTF 2023 WEEK1|PWN ret2text

拖进IDA&#xff0c;查看 int __cdecl main(int argc, const char **argv, const char **envp) {char buf[32]; // [rsp0h] [rbp-20h] BYREFinit();puts("Welcome to NewStar CTF!!");puts("Show me your magic");read(0, buf, 0x100uLL);return 0; } ma…