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

news2024/10/6 1:58:48

一、问题描述

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

在Vue的data中是这样写的:

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

 

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

 

二、解决方案

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

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

界面效果:

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

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

相关文章

使用原生html<table>构造复杂table表

<table border data-sort"sortDisabled" align"center" class"table"><tbody><tr class"textarea1"><td rowspan"1" colspan"2" class"background-gray"><label>日期<…

更新andriod studio版本,项目编译报could not find org.junit.jupiter:junit-jupiter

原本使用Android Studio 版本是4.1.1&#xff0c;现更新为 点击build -》 build bundle -》build apk&#xff0c;项目报 Could not determine the dependencies of task :app:compileDebugUnitTestJavaWithJavac. > Could not resolve all task dependencies for configur…

前脚收费,后脚道歉?Unity收费新规引众怒,Epic承诺虚幻引擎永久免费

&#xfeff;当你还在纠结开发游戏用Unity引擎还是UE虚幻引擎的时候&#xff0c;Unity已经给游戏开发领域重重一拳。 &#xfeff;Unity作为一款全球范围内广泛使用的游戏引擎&#xff0c;因其价格亲民且灵活而备受众多开发者的青睐。然而在9月12日&#xff0c;Unity突然宣布计…

分析大疆官网根据ip自动跳转到指定域名

如果cookie存在region且有效&#xff0c;跳转到指定域名&#xff0c; 如果cookie存在region且无效&#xff0c;跳转到默认域名&#xff0c; 如果禁用cookie或者cookie中没有region&#xff0c;根据ip自动判断所在地区&#xff0c;跳转到指定域名 1、浏览器地址栏输入dji.com&am…

2018-2022年盟浪 ESG数据

2018-2022年盟浪 ESG数据 1、时间&#xff1a;2018-2022年 2、指标&#xff1a;证券代码、证券简称、盟浪ESG评级、省份、城市、所属证监会行业名称[交易日期] 最新收盘日[行业级别] 大类行业、所属证监会行业代码[交易日期] 最新收盘日[行业级别] 大类行业 3、范围&#xf…

图像练习-计算平行线距离opencv(03)

原图 //对输入图像进行细化 cv::Mat ThinLine(const cv::Mat& matsrc, const int& iterations) {//CvSize size cvGetSize(src);cv::Mat dst matsrc.clone();//拷贝一个数组给另一个数组int _iwidth dst.cols;int _iheight dst.rows;int n 0, i 0, j 0;for (n …

【每日一题】658. 找到 K 个最接近的元素

658. 找到 K 个最接近的元素 - 力扣&#xff08;LeetCode&#xff09; 给定一个 排序好 的数组 arr &#xff0c;两个整数 k 和 x &#xff0c;从数组中找到最靠近 x&#xff08;两数之差最小&#xff09;的 k 个数。返回的结果必须要是按升序排好的。 整数 a 比整数 b 更接近 …

抖音SEO矩阵系统源码开发搭建

1. 确定需求和功能&#xff1a;明确系统的主要目标和需要实现的功能&#xff0c;包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构&#xff1a;根据需求和功能确定系统的架构&#xff0c;包括前端、后端、数据库等部分的设计&#xff0…

计算机组成原理之硬件的内部结构,拆开单独的硬件,查看硬件组成部分的结构和功能。

大家好&#xff0c;欢迎阅读《计算机组成原理》的系列文章&#xff0c;本系列文章主要教内容是从零学习计算机组成原理&#xff0c;内容通俗易懂&#xff0c;大家好好学习吧&#xff01;&#xff01;&#xff01; 更多的优质内容&#xff0c;请点击以下链接查看哦~~ ↓ ↓ ↓ …

【加载数据--自定义自己的Dataset类】

【加载数据自定义自己的Dataset类】 1 加载数据2 数据转换3 自定义Dataset类4 划分训练集和测试集5 提取一批次数据并绘制样例图 假设有四种天气图片数据全部存放与一个文件夹中&#xff0c;如下图所示&#xff1a; ├─dataset2 │ cloudy1.jpg │ cloudy10.jpg │ …

使用matlab产生二维动态曲线视频文件具体举例

使用matlab产生二维动态曲线视频文件举例 在进行有些函数变化过程时候&#xff0c;需要用到直观的动态显示&#xff0c;本博文将举例说明利用Matlab编程进行二维动态曲线的生成视频文件。 一、问题描述 利用matlab编程实现 y 1 s i n ( t ) , y 2 c o s ( t ) , y 3 s i …

JAVA_多线程的实现方式

线程的状态 方式一&#xff1a; public class Thread1 extends Thread {Overridepublic void run() {synchronized (this) {for (int i 0; i < 100; i) {System.out.println(getName() "" i);}}} } Thread1 thread1 new Thread1(); thread1.start(); 方式二…

用flex实现grid布局

1. css代码 .flexColumn(columns, gutterSize) {display: flex;flex-flow: row wrap;margin: calc(gutterSize / -2);> div {flex: 0 0 calc(100% / columns);padding: calc(gutterSize / 2);box-sizing: border-box;} }2.用法 .grid-show-item3 {width: 100%;display: fl…

天洑软件祝贺“星耀蓉城 篮能可贵”四城邀请赛暨西北工业大学校友篮球嘉年华活动圆满举办

9月16日&#xff0c;由西北工业大学成都校友会主办&#xff0c;成都市新都区文化体育和旅游局承办&#xff0c;天洑软件、泸州老窖、陕西省篮球协会、龙湖地产、奥伦达科技、南京全信、成都鑫长源、四川银行、优仿科技、华科机电、小鱼易连、四川省篮球协会、GAME7篮球俱乐部赞…

云安全之访问控制介绍

访问控制技术背景 信息系统自身的复杂性、网络的广泛可接入性等因素&#xff0c;系统面临日益增多的安全威胁&#xff0c;安全问题日益突出&#xff0c;其中一个重要的问题是如何有效地保护系统的资源不被窃取和破坏。 访问控制技术内容包括访问控制策略、访问控制模型、访问…

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

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

MySQL数据库入门到精通9--运维篇

1. 日志 1.1 错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时&#xff0c;建议首先查看此日志。 该日志是默认开启的&am…

解决安装 RabbitMQ 安装不成功的问题

由于RabbitMQ是基于erlang的&#xff0c;所以&#xff0c;在正式安装RabbitMQ之前&#xff0c;需要先安装一下erlang。 1、下载mq https://www.rabbitmq.com/download.html 2、下载erlang&#xff08;点击下载路径根据下载的MQ版本对应下载erl版本&#xff09; https://www.…

客户端负载均衡_什么是负载均衡

为什么需要负载均衡 俗话说在生产队薅羊毛不能逮着一只羊薅&#xff0c;在微服务领域也是这个道理。面对一个庞大的微服务集群&#xff0c;如果你每次发起服务调用都只盯着那一两台服务器&#xff0c;在大用户访问量的情况下&#xff0c;这几台被薅羊毛的服务器一定会不堪重负…