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

news/2024/9/22 9:51:22/

一、问题描述

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

在Vue的data中是这样写的:

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

 

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

 

二、解决方案

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

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

界面效果:


http://www.ppmy.cn/news/1124591.html

相关文章

MySQL 排序规则

文章目录 1.简介2.支持的排序规则3.设置排序规则4.中文排序规则参考文献 1.简介 字符集是一组符号和编码。排序规则是一组用于比较字符集中的字符的规则。 每个 MySQL 字符集可以支持一个或者多个排序规则,用于定义每个字符的比较规则,包括是否区分大小…

amlogic 机顶盒关闭DLNA 后,手机还能搜到盒子

S905L3 带有投屏的功能,并通过 com.droidlogic.mediacenter.dlna.MediaCenterService 服务的启动和停止来开启和关闭DLNA功能,但是在测试中发现机顶盒关闭DLNA后,手机还能搜索到盒子。我在复测中发现关闭后有时很难很久搜索到盒子&#xff0c…

活动回顾 | 暴雨也无法阻挡的奔赴,2023 Meet TVM · 深圳站完美收官!

2023 Meet TVM 深圳站于 2023 年 9 月 16 日在腾讯大厦成功举办,百余名参与者亲临现场,聆听讲师们的精彩分享。 作者 | xixi 编辑 | 三羊 本文首发于 HyperAI 超神经微信公众平台~ **由 MLC.AI 社区和 HyperAI超神经主办,Openbayes贝式计算…

【C语言】计算结构体的大小!结构体内存对齐的意义是什么?

本篇文章目录 1. 结构体内存对齐1.1 结构体的内存对齐规则1.2 例子1.3 结构体内存对齐的意义1.4 如何正确地设计结构体1.5 修改默认对齐数1.6 offsetof 宏计算结构体成员的偏移量 1. 结构体内存对齐 1.1 结构体的内存对齐规则 第一个成员在与结构体变量偏移量为0的地址处。其…

如何在低代码平台中应用可视化编程

可视化编程,亦即可视化程序设计:以“所见即所得”的编程思想为原则,力图实现编程工作的可视化,即随时可以看到结果,程序与结果的调整同步。可视化编程的理念来源于可视化技术,它指的是一种把计算机程序中的…

Redis群集

1、redis群集三种模式 redis群集有三种模式,分别是主从同步/复制、哨兵模式、Cluster,下面会讲解一下三种模式的工作方式,以及如何搭建cluster群集 ●主从复制:主从复制是高可用Redis的基础,哨兵和集群都是在主从复制…

el-select 下拉框全选、多选的几种方式组件

组件一、基础多选 适用性较广的基础多选&#xff0c;用 Tag 展示已选项 <template><el-select v-model"value1" multiple placeholder"请选择"><el-optionv-for"item in options":key"item.value":label"item.la…

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

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