vue 动态渲染本地图片不显示的解决方法

代码更改前

 <img class="img" :src="`@/assets/images/${syntheticalGrade}.png`" />data(){return{syntheticalGrade:"1"}
}

效果图:
在这里插入图片描述

解决代码

 <img class="img" :src="require(`@/assets/images/${syntheticalGrade}.png`)" />data(){return{syntheticalGrade:"1"}
}

效果图:
在这里插入图片描述

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

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

相关文章

光纤跳线的大方头跳线、小方头跳线、圆头跳线

光纤跳线在数据中心的应用非常广泛&#xff0c;它普遍应用在光纤通信系统 、光纤接入网、光纤设备传输以及局域网等领域。在光纤通信快速 发展和各种设备需求扩大的推动下&#xff0c;更多类型的光纤跳线被研发出 以及被使用。大家可能听说过LC、SC、FC、ST等跳线&#xff0c;那…

Linux命令 - 如何查询当前已使用的内存占比

结果先行 free -h | awk NR2{printf "%.2f%%", $3*100/$2 }解释一下 这个命令组合了 free -h 和 awk 命令来输出已用内存的百分比。我们一步一步来解析这个命令&#xff1a; Step 1 free -hfree 是一个用来显示 Linux 系统内存使用情况的命令。-h 参数是 “human…

成功解决TypeError: can‘t multiply sequence by non-int of type ‘float‘

&#x1f525; 成功解决TypeError: can’t multiply sequence by non-int of type ‘float’ &#x1f4c5; 日期&#xff1a;2024年2月23日 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化…

Intel处理器虚拟化技术VT-x86下实现小型虚拟化框架(1)

一.前言 我一直觉得&#xff0c;学习计算机中的一门新技术&#xff0c;一定要从历史去了解他的全貌。这样有利于我们了解事情的来龙去脉和发展的过程。一上来直接接触新兴事物&#xff0c;很容易陷入不知从何下手的困境。不了解历史发展&#xff0c;就不明白前人的一些操作。因…

Xcode中App图标和APP名称的修改

修改图标 选择Assets文件 ——> 点击Applcon 换App图标 修改名称 点击项目名 ——> General ——> Display Name

Servlet(2)

文章目录 更方便的部署方式安装 Smart Tomcat 插件配置 Smart Tomcat 插件 访问出错怎么办出现 404出现 405出现 500出现 "空白页面"出现 "无法访问此网站" 小结 更方便的部署方式 手动拷贝 war 包到 Tomcat 的过程比较麻烦. 我们还有更方便的办法. 此处我…

智慧校园的未来已来!AI与数字孪生领航教育新时代

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;和数字孪生技术正逐渐渗透到我们生活的方方面面&#xff0c;而在教育领域&#xff0c;它们的结合更是催生出一种全新的智慧校园模式。这种模式的出现&#xff0c;不仅预示着教育管理方式的彻底变革&#xff0…

网络原理 - HTTP/HTTPS(5)

HTTPS HTTPS也是一个应用层协议.在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输的. 这就导致了在传输过程中出现了一些被篡改的情况. 臭名昭著的"运营商劫持" 下载一个天天动听. 未被劫持的效果,点击下载按钮,就会弹出天天动听的…

【linux】常见指令 -通配符,数据管道,重定向,压缩打包...

目录 前言 基本指令 ls命令 常见选项 ​编辑 pwd命令 cd 指令 常见选项 touch指令 mkdir指令 常见选项 rm 指令 常见选项 man指令 cp指令 常用选项&#xff1a; mv指令 常用选项 nano指令 如何写入且执行文件&#xff1f; cat指令 常用选项 more指令…

基于RK3399 Android11适配OV13850 MIPI摄像头

目录 1、原理图分析2、编写和配置设备树3、调试方法4、遇到的问题与解决5、补丁 1、原理图分析 从上图可看出&#xff0c;我们需要关心的&#xff0c;①MIPI数据和时钟接口使用的是MIPI_TX1/RX1 ②I2C使用的是I2C4总线 ③RST复位引脚使用的是GPIO2_D2 ④PWDN使用的是GPIO1_C7 ⑤…

【Python笔记-设计模式】外观模式

一、说明 外观模式是一种结构型设计模式&#xff0c;能为程序库、框架或其他复杂类提供一个统一的接口。 (一) 解决问题 简化复杂系统的接口调用 (二) 使用场景 简化复杂系统&#xff1a;需要一个指向复杂子系统的直接接口&#xff0c; 且该接口的功能有限时重构复杂的代码…

unity ui界面优化

优化一个比较复杂的界面&#xff0c;里面有多个rt和组件。 在初次打开这个界面的时候会发生1s多的卡顿&#xff0c;还是非常严重的。 分析 通过profiler分析 1.打开界面时卡顿。 分析&#xff1a;除了update和dotween相关逻辑&#xff0c;主要在于打开时的lua function调用…

幻兽帕鲁(Palworld 1.4.1)私有服务器搭建(docker版)

文章目录 说明客户端安装服务器部署1Panel安装和配置docker服务初始化设置设置开机自启动设置镜像加速 游戏服务端部署游戏服务端参数可视化配置 Palworld连接服务器问题总结 说明 服务器硬件要求&#xff1a;Linux系统/Window系统&#xff08;x86架构&#xff0c;armbian架构…

spring boot3登录开发-3(账密登录逻辑实现)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途。 目录 前置条件 内容简介 用户登录逻辑实现 创建交互对象 1.创建用户登录DTO 2.创建用户登录VO 创建自定义登录业务异…

如何使用ChatGPT创建一份优质简历

目录 第一步&#xff1a;明确目标和重点 第二步&#xff1a;与ChatGPT建立对话 第三步&#xff1a;整理生成的内容 第四步&#xff1a;注重行文风格 第五步&#xff1a;强调成就和量化结果 第六步&#xff1a;个性化和定制 第七步&#xff1a;反复修改和完善 总结 在现…

分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测

分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测 目录 分类预测 | Matlab实现KPCA-ISSA-LSSVM基于核主成分分析和改进的麻雀搜索算法优化最小二乘支持向量机故障诊断分类预测分类效果基本描述程序设计参考资…

【软件测试】定位前后端bug总结+Web/APP测试分析

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Web测试中简单…

k8s-pod的介绍及命令行创建pod

一、 pod介绍 在kubernetes的世界中&#xff0c;k8s并不直接处理容器&#xff0c;而是使用多个容器共存的理念&#xff0c;这组容器就叫做pod。 pod是k8s中可以创建和管理的最小单元&#xff0c;是资源对象模型中由用户创建或部署的最小资源对象模型&#xff0c;其他的资源对象…

车载测试面试:题库+项目

车载测试如何面试&#xff08;面试技巧&#xff09;https://blog.csdn.net/2301_79031315/article/details/136229809 入职车载测试常见面试题(附答案&#xff09;https://blog.csdn.net/2301_79031315/article/details/136229946 各大车企面试题汇总&#xff08;含答案&am…

Megalinter 初体验

简介 MegaLinter 是一个多语言、多工具的集成代码检查工具&#xff0c;它能够通过一个统一的工作流来运行多个静态代码分析工具&#xff0c;从而提供全面的代码质量检查。 官网&#xff1a;https://megalinter.io/latest/ MegaLinter 的特点&#xff1a; 多语言支持&#x…