拼接图片路径不显示:vue

下面这2中方法都不能显示图片 

<img :src="'@/assets/'+ scope.row.iconName+'.svg'" width="15"/>
<img :src="`@/assets/icons/${scope.row.iconName}.svg`" width="15"/>

而这样可以

<img src="@/assets/icons/sign.svg" width="15"/>

有可能是因为模板字符串中使用的路径格式不正确,或者是在模板字符串中拼接路径时出现了问题。在 Vue 模板中,使用模板字符串插入变量通常都是有效的,但有时可能会出现一些问题。

可以尝试一下这种写法:

<img :src="require(`@/assets/icons/${scope.row.iconName}.svg`)" width="15"/>

这种写法使用了 require 函数来动态加载图片资源,通常可以解决一些路径相关的问题。

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

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

相关文章

C++之大数运算

溪云初起日沉阁 山雨欲来风满楼 契子✨ 我们知道数据类型皆有范围&#xff0c;一旦超出了这个范围就会造成溢出问题 今天说说我们常见的数据类型范围&#xff1a; 我们平时写代码也会遇到数据类型范围溢出问题&#xff1a; 比如 ~ 我们之前写的学生管理系统在用 int类型 填写…

stack的使用

1.栈的定义 我们可以看到模板参数里面有一个容器适配器 &#xff0c;什么是适配器&#xff1f;比如充电器就叫做电源适配器&#xff0c;用在做转换&#xff0c;对电压进行相关的转换适配我们的设备。栈&#xff0c;队列不是自己直接管理数据&#xff0c;是让其他容器管理数据&a…

java-函数式编程-语法

目录 1、函数表现形式 分类 lambda表达式 参数类型可以全写&#xff0c;也可以全不写&#xff0c;但不能一部分写&#xff0c;一部分不写lambda 的省略策略&#xff1a;凡是可推导&#xff0c;都可以省略 方法引用 练习-判断语法正确性 练习-写出与方法引用等价的lambda表达式…

orpo 实例demo

代码参考地址 论文参考地址 demo import paddleclass LLm(paddle.nn.Layer):def __init__(self, voc, hidden):super(LLm, self).__init__()self.em paddle.nn.Embedding(voc, hidden)self.out_layer paddle.nn.Linear(hidden, voc, bias_attrFalse)def forward(self, x):…

新火种AI|马斯克聘用OpenAI泄密者,他们的梁子着实越结越深...

作者&#xff1a;小岩 编辑&#xff1a;彩云 就在最近&#xff0c;昔日就职于OpenAI的工程师Pavel Izmailov正式加入了马斯克的AI团队&#xff0c;他还在自己的推特上大张旗鼓的做着宣传&#xff1a;研究院xai。 AI工程师的跳槽本不值得惊讶&#xff0c;但Pavel的跳槽却在行…

LSTM神经网络 vs Transformer在量化中的应用

LSTM,全称Long Short-Term Memory,是一种特殊的递归神经网络。它通过巧妙的"门"结构,可以有效地捕捉时间序列数据中的长期依赖关系。这一特点,使得LSTM在处理股价这种具有时间序列特性的数据时,展现出了非凡的潜力。 这种特殊的递归神经网络 与一般的前馈神经网络不…

C++语法|如何写出高效的C++代码(一)|对象使用过程中背后调用了哪些方法(构造和析构过程)?

文章目录 再探拷贝构造函数和重载复制运算符实例化新对象和赋值操作强转为类类型指针和引用时临时对象的构造和析构过程 考考你问题答案 再探拷贝构造函数和重载复制运算符 实例化新对象和赋值操作 首先我们写一个类&#xff0c;实现它的拷贝构造并重载赋值运算符。 class T…

QSPI与SDIO差异

将STM32微控制器上的Quad SPI&#xff08;QSPI&#xff09;和Secure Digital Input/Output&#xff08;SDIO&#xff09;接口结合起来&#xff0c;可以显著增强嵌入式系统的功能&#xff0c;提供高速数据传输和非易失性存储选项。以下是如何在您的STM32项目中集成QSPI和SDIO的简…

盘点四种计算数组中元素值为1的个数的方法

目录 一、引言 二、方法一&#xff1a;基础循环遍历 三、方法二&#xff1a;列表推导式 四、方法三&#xff1a;使用内置函数sum和生成器表达式 五、方法四&#xff1a;使用NumPy库 六、性能比较 七、性能结果分析与讨论 八、最佳实践 九、总结 一、引言 在编程和数…

银河麒麟QT项目打包详细教程

银河麒麟QT项目打包详细教程 一、QT项目打包 下载linuxdeployqt&#xff0c;下载地址&#xff1a;https://github.com/probonopd/linuxdeployqt/releases 安装Linuxdeployqt 2.1 为了安装方便&#xff0c;将下载下来的文件名称改短些 mv linuxdeployqt-6-x86_64.AppImage lin…

Python中的bytearray对象,灵活的字节序列处理

写在前言 hello&#xff0c;大家好&#xff0c;我是一点&#xff0c;专注于Python编程&#xff0c;如果你也对感Python感兴趣&#xff0c;欢迎关注交流。 希望可以持续更新一些有意思的文章&#xff0c;如果觉得还不错&#xff0c;欢迎点赞关注&#xff0c;有啥想说的&#x…

92、动态规划-最小路径和

思路&#xff1a; 还是一样&#xff0c;先使用递归来接&#xff0c;无非是向右和向下&#xff0c;然后得到两种方式进行比较&#xff0c;代码如下&#xff1a; public int minPathSum(int[][] grid) {return calculate(grid, 0, 0);}private int calculate(int[][] grid, int …

射频无源器件之巴伦

一. 巴伦的作用 Balun,balanced-unbalanced的缩写,即平衡-不平衡转换器,是一种三端口无源器件,其本质是通过电感线圈的相互耦合实现的信号转换。用于平衡信号(差分信号,即振幅相等、相位相差180 的两个信号)与非平衡信号(单端信号)的相互转换。 Balun是高频电路重要器…

Scala 类和对象

类是对象的抽象&#xff0c;而对象是类的具体实例。类是抽象的&#xff0c;不占用内存&#xff0c;而对象是具体的&#xff0c;占用存储空间。类是用于创建对象的蓝图&#xff0c;它是一个定义包括在特定类型的对象中的方法和变量的软件模板。 我们可以使用 new 关键字来创建类…

Vmware虚拟机瘦身及Samba服务不可用问题解决

虚拟机磁盘空间膨胀是一个令人头疼的问题&#xff0c;特别是对许多搞开发的小伙伴。无论是做后台服务、嵌入式还是Android开发&#xff0c;都面临着这个难题。首先&#xff0c;操作系统本身就已占用不少空间&#xff0c;更新安装包&#xff0c;再下载一些开源软件&#xff0c;剩…

运行Spring Boot项目失败?显示java: 无法访问org.springframework.boot.SpringApplication,让我来看看~

idea项目运行报错截图&#xff1a; &#xff08;1&#xff09;查看错误提示“类文件具有错误的版本 61.0, 应为 52.0”&#xff0c;61.0对应的是jdk17&#xff0c;52.0对应1.8。 通过这个网址可以查询版本&#xff1a; https://stackoverflow.com/questions/9170832/list-of-ja…

14-串口通讯

串口通信简介 串口通信&#xff0c;设备间常用的串行通讯方式&#xff0c;简单便捷&#xff0c;大部分设备都支持。 本人使用的开发板默认使用串口终端。windows上使用串口通讯工具来来接开发板&#xff0c;如putty&#xff0c;xShell&#xff0c;MobaXterm等等。 使用工具时…

网络编程入门之UDP编程

欢迎各位帅哥美女来捧场&#xff0c;本文是介绍UDP网络编程。在这里&#xff0c;你会见到最详细的教程&#xff1b;细致到每一行代码&#xff0c;每一个api的由来和使用它的目的等。 目录 1.UDP相关API 1.1.两个类 1.2.两个类中的方法 2.UDP编程 2.1.大体框架 2.2.内容构…

【项目学习01_2024.05.08_Day06】

学习笔记 5 新增课程5.1 需求分析5.1.1 业务流程5.1.2 数据模型 5.2 接口定义5.3 接口开发5.3.1 保存课程基本信息5.3.2 保存营销信息 5.4 接口测试 5 新增课程 5.1 需求分析 5.1.1 业务流程 5.1.2 数据模型 5.2 接口定义 5.3 接口开发 根据需求分析&#xff0c;新增课程表…

MIMO和RIS的一些学习

1.Accurate Beam Training for RIS-Assisted Wideband Terahertz Communication&#xff08;RIS 辅助宽带太赫兹通信的精确波束训练&#xff09; 摘要&#xff1a;太赫兹 (THz) 通信被广泛认为是未来 6G 无线系统最有前途的技术之一。为了应对太赫兹系统中的高路径损耗&#x…