解决Vue设置图片的动态src不生效的问题

一、问题描述

        在vue项目中,想要动态设置img的src时,此时发现图片会加载失败。在Vue代码中是这样写的:

在Vue的data中是这样写的:

我的图片在根目录下的static里面:

 

但是在页面上这个图片却无法加载出来。

 

二、解决方案

原因:src被当做静态资源处理了,并没有进行编译。

解决方式:使用require引入图片,因为require是在运行时加载。如下:

界面效果:

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

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

相关文章

五、核支持向量机算法(NuSVC,Nu-Support Vector Classification)(有监督学习)

和支持向量分类(Nu-Support Vector Classification),与 SVC 类似,但使用一个参数来控制支持向量的数量,其实现基于libsvm 一、算法思路 本质都是SVM中的一种优化,原理都类似,详细算法思路可以参考博文:三…

10分钟让你拿下Linux常用命令,网安运维测试人员必掌握!

文章目录 一、目录操作 1、批量操作 二、文件操作三、文件内容操作(查看日志,更改配置文件) 1、grep(检索文件内容)2、awk(数据统计)3、sed(替换文件内容)4、管道操作符|5、cut(数据裁剪) 四、系统日志位置五、创建与删除软连接六、压缩和解压…

虹科案例 | ELPRO帮助客户实现符合GDP标准的温度监测和高效的温度数据管理

文章来源:虹科环境监测技术 点击阅读原文:https://mp.weixin.qq.com/s/wwIPx_GK3ywqWr5BABC4KQ 在本案例研究中,虹科ELPRO帮助客户 ● 实施了温度监测解决方案,以一致的数据结构获取各国和各种运输方式的数据; ● 通过将温度数据上…

https跳过SSL认证时是不是就是不加密的,相当于http?

https跳过SSL认证时是不是就是不加密的,相当于http?,其实不是,HTTPS跳过SSL认证并不相当于HTTP,也不意味着没有加密。请注意以下几点: HTTPS(Hypertext Transfer Protocol Secure)本质上是在HTTP的基础上…

【postgresql】ERROR: column “xxxx.id“ must appear in the GROUP BY

org.postgresql.util.PSQLException: ERROR: column "xxx.id" must appear in the GROUP BY clause or be used in an aggregate function 错误:列“XXXX.id”必须出现在GROUP BY子句中或在聚合函数中使用 在mysql中是正常使用的,在postgre…

数字IC笔试千题解--单选题篇(二)

前言 出笔试题汇总,是为了总结秋招可能遇到的问题,做题不是目的,在做题的过程中发现自己的漏洞,巩固基础才是目的。 所有题目结果和解释由笔者给出,答案主观性较强,若有错误欢迎评论区指出,资料…

投资理财知识分享:100个金融知识专业术语

大家好,我是财富智星,今天跟大家分享一下投资理财知识方面100个金融知识专业术语,希望能帮助大家了解更多金融知识。 1. 股票:代表对一家公司所有权的证券。 2. 债券:公司或政府发行的借款证券。 3. 投资组合&#xff…

00-MySQL数据库的使用-上

一 数据库基础知识 先谈发音 MySQL如何发音?在国内MySQL发音有很多种,Oracle官方文档说 他们念作 My sequal[si:kwəl]。 数据库基本概念 数据 数据(Data)是指对客观事物进行描述并可以鉴别的符号,这 些符号是可识别…

分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测(SE注意力机制)

分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测(SE注意力机制) 目录 分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测(SE注意力机制)分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLA…

loadEnv是vite的工具函数

loadEnv()函数返回一个对象,这个对象就是根据开发模式还是生产环境加载的.env.development文件里的环境变量,有系统自带的也有自己手写的 loadEnv(第1个参数,第2个参数,第3个参数) 注意:第3个参数如果是“”空字符…

LL库实现正交编码器数据采集

1,首先打开STM32CubeMX,配置一下工程,这里使用的芯片是STM32F103C8T6。 我这里选择了定时器2和3,因为我有两个电机,在定时器模式这边,我们在Combined Channels这个选项里面我们选择Encoder Mode&#xff0c…

OpenCV实现图像的礼帽和黑帽

礼帽运算 黑帽运算 参数 cv.morphologyEx(img,op,kernel)参数: img : 要处理的图像op: 处理方式 代码实现 import numpy as np import cv2 as cv import matplotlib.pyplot as plt from pylab import mplmpl.rcParams[font.sans-serif] [SimHei]#读取图像img1 …

Hyper-V 虚拟机CentOS配置网络(三)

总目录 https://preparedata.blog.csdn.net/article/details/132877836 文章目录 总目录一、创建交换机二、共享网络给交换机三、虚拟机配置交换机四、配置CentOS网络 一、创建交换机 二、共享网络给交换机 打开物理宿主机的控制面板的网络链接中心,此时已经多了一…

【从0学习Solidity】52. EIP712 类型化数据签名

【从0学习Solidity】 52. EIP712 类型化数据签名 博主简介:不写代码没饭吃,一名全栈领域的创作者,专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构,分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#…

配电室电力监控系统:实时掌握电力运行状况

配电室是电力系统的重要组成部分,负责将发电厂输送的电力分配到各个用电终端。随着电力需求的不断增长,配电室的规模和复杂性也在增加。为了确保电力系统的稳定运行,采用配电室电力监控系统变得至关重要。 一、配电室电力监控系统概述 力…

TCP 和 UDP哪个更好

传输控制协议 (TCP) 和用户数据报协议 (UDP) 是互联网的基础支柱,支持从网络源到目的地的不同类型的数据传输。TCP更可靠,而UDP优先考虑速度和效率。本文解释了两种协议的工作原理,并详细讨论了…

【遥遥领先】Eolink IDEA 插件:零代码入侵,自动生成接口

省流版: Eolink 有 IDEA 插件吗? 有,而且遥遥领先!我们在一年半之前就发布了,而且功能更丰富! IDEA 插件市场搜索“Eolink Apikit”即可安装使用。 🚀使用指引:Eolink - IntelliJ ID…

virtualbox无界面打开linux虚拟机的bat脚本,以及idea(代替Xshell)连接linux虚拟机的方法

virtualbox无界面打开linux虚拟机的bat脚本,以及idea连接linux虚拟机的方法 命令行运行代码成功运行的效果图 idea连接linux虚拟机的方法【重要】查看虚拟机的IP地址idea中选择菜单(该功能可代替Xshell软件)配置设置连接成功进入idea中的命令…

Java on Azure Tooling 8月更新|以应用程序为中心的视图支持及 Azure 应用服务部署状态改进

作者:Jialuo Gan - Program Manager, Developer Division at Microsoft 排版:Alan Wang 大家好,欢迎阅读 Java on Azure 工具的八月更新。在本次更新中,我们将推出新的以应用程序为中心的视图支持,帮助开发人员在一个项…

德大黄鱼开捕 年产量20万吨 京东超市多举措保障黄鱼品质

作为“中国大黄鱼之都”,宁德大黄鱼占全国大黄鱼总产值产量均在90%以上。有关方面预计,今年全年宁德大黄鱼产量达20万吨,年增产10%,直接经济产值超百亿元。 宁德大黄鱼开捕活动,由宁德市政府、宁德渔业协会、京东超市…