当前位置: 首页 > news >正文

VUE语法--img图片不显示/img的src动态赋值图片显示

1、问题概述

常见情景1在VUE中使用img显示图片的时候,通过传参的方式传入图片的路径和名称,VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源,从而出现了图片无法显示的情况。

常见情景2针对上述的问题,我们有些人会使用require函数去设置程序,告诉VUE你加载资源的时候加载本地资源,这个时候回报错:VUE使用require报错:Uncaught Error: cannot module ‘asstes/logo.png’

2、常规的使用图片方式

1、<img src=”../images/1.png” />

2、<img src=”http://....//2.png” />

这种直接通过相对路径获取项目下的图片或者直接使用或传入网络资源是没有问题的。

3、期望使用动态的图片地址

案例说明:在vue中通过ref创建了一个响应式的参数imgUrl,图片的路径是asstes/logo.png,在templateimg通过:src绑定使用了imgUrl,这个时候图片是无法显示的。

原因:vue没有将当前的图片信息当成是本地的静态资源处理,而是当成了网络资源处理,所以报错404找不到资源。

<template><div><img :src="imgUrl" alt=""></div>
</template>
<script>
import { ref } from 'vue'
export default {name: 'App',setup(){//简单数据的响应const imgUrl=ref('asstes/logo.png') return {imgUrl}}
}
</script>

4、通过require解决上述问题

我们对上面的代码进行改造,告诉VUE你要加载本地的静态资源而不是网络资源

我们在img中的:src中加入了require,这个函数可以实现加载本地资源而给网络资源

但是这个有报错。

VUE使用require报错:Uncaught Error: cannot module ‘asstes/logo.png’

<template><div><img :src="require(imgUrl)" alt=""></div>
</template>
<script>
import { ref } from 'vue'
export default {name: 'App',setup(){//简单数据的响应const imgUrl=ref('asstes/logo.png') return {imgUrl}}
}
</script>

4.1、问题分析+最终解决

Vue中,img组件的src使用require加载静态资源,不能使用变量,因为require是编译时执行的,而非运行时执行。在ES6中使用require加载静态资源的时候,相对路径需要写死,参数只传入名称就可以了。

代码改造如下:

代码分析:定义的imgUrl只包含了图片的名称logo.png,图片的静态资源asstes直接写死在require函数中。最终问题解决

<template><div><img :src="require('./assets/'+imgUrl)" alt=""></div>
</template>
<script>
import { ref } from 'vue'
export default {name: 'App',setup(){//简单数据的响应const imgUrl=ref('logo.png') return {imgUrl}}
}
</script>

相关文章:

VUE语法--img图片不显示/img的src动态赋值图片显示

1、问题概述 常见情景1&#xff1a;在VUE中使用img显示图片的时候&#xff0c;通过传参的方式传入图片的路径和名称&#xff0c;VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源&#xff0c;从而出现了图片无法显示的情况。 常见情景2&#xff1a;针…...

springboot+vue智能企业设备管理系统05k50

智能设备管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性&#xff0c;遵循开发的系统优化的原则&#xf…...

C++中的new、operator new与placement new

new operator new operator是我们常用的new。 new 和 delete 是用来在 堆上申请和释放空间的 &#xff0c;是 C 定义的 关键字&#xff0c;和 sizeof 一样。 实际 new / delete 和 malloc / free 最大的区别是&#xff0c;前者对于 自定义类型 除了可以开辟空间&#xff0c;…...

ElasticSearch之cat anomaly detectors API

curl -X GET "https://localhost:9200/_cat/ml/anomaly_detectors?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; curl -X GET "https://localhost:9200/_cat/ml/ano…...

Luminar Neo1.16.0(ai智能图像处理)

Luminar Neo是一款ai智能图像编辑软件&#xff0c;它专注于使用人工智能技术来实现对照片的快速、高效和创造性的编辑。 具体来说&#xff0c;Luminar Neo可以自动移除景观或旅行照片中令人分心的元素&#xff0c;例如电话线、电线杆等&#xff0c;从而增强照片的整体质量。同…...

ElasticSearch之cat aliases API

执行aliases命令&#xff0c;如下&#xff1a; curl -X GET "https://localhost:9200/_cat/aliases?pretty&vtrue" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; alias index …...

bash编程 数组和for循环的应用

bash编程 数组和for循环的应用 1、问题背景2、bash 定义数组3、for循环遍历输出数组所有元素4、编写bash脚本输出每个端口是否在监听状态 1、问题背景 linux服务器开机后&#xff0c;需要检查一组端口是否在监听&#xff0c;以便判断这些端口对应的服务是否在运行。可以考虑使…...

Python基础:标准库概览

1. 标准库介绍 Python 标准库非常庞大&#xff0c;所提供的组件涉及范围十分广泛&#xff0c;正如以下内容目录所显示的。这个库包含了多个内置模块 (以 C 编写)&#xff0c;Python 程序员必须依靠它们来实现系统级功能&#xff0c;例如文件 I/O&#xff0c;此外还有大量以 Pyt…...

C#,《小白学程序》第三课:类class,类的数组及类数组的排序

类class把数值与功能巧妙的进行了结合&#xff0c;是编程技术的主要进步。 下面的程序你可以确立 分数 与 姓名 之间关系&#xff0c;并排序。 1 文本格式 /// <summary> /// 同学信息类 /// </summary> public class Classmate { /// <summary> /…...

建筑结构健康监测系统和传统人工监测的区别

在繁华的城市里&#xff0c;建筑结构作为城市生命线的重要一环&#xff0c;其安全与稳定对城市的运转和居民的生活至关重要。为了更好地守护建筑结构的健康&#xff0c;WITBEE万宾自主研发建筑结构健康监测系统让建筑安全&#xff0c;在上一个台阶。 WITBEE万宾建筑结构健康监测…...

二 使用GPIO的复用功能 利用USART 实现printf()

参考这篇&#xff1a; STM32串口通信详解 1. 关于USART USART ( universal synchronous / asynchronous receiver /transmitter) 是一种串行通讯协议 , 允许设备通过串行端口进行数据传输&#xff0c; USART 能够以同步或者异步的方式进行工作&#xff0c;在实际的运用中&…...

C#中的警告CS0120、CS0176、CS0183、CS0618、CS0649、CS8600、CS8601、CS8602、CS8604、CS8625及处理

目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前&#xff1a; 2. 解决后&#xff1a; 3.解决方法&#xff1a; 八、CS8604和CS8625 九、CS0649 十、CS8601 一、CS0120 严重性 代…...

js中声明变量的关键字(const,let,var)

const 特点&#xff1a; const不允许在同一作用域重复声明&#xff0c;块级作用域暂时性死区&#xff0c;在声明之前&#xff0c;该变量是不可用的const声明的是一个只读变量&#xff0c;声明之后不能改变其值&#xff0c;一旦声明必须初始化但是const定义的对象属性是可以修…...

Android13 launcher循环切页

launcher 常规切页&#xff1a;https://blog.csdn.net/a396604593/article/details/125305234 循环切页 我们知道&#xff0c;launcher切页是在packages\apps\Launcher3\src\com\android\launcher3\PagedView.java的onTouchEvent中实现的。 1、滑动限制 public boolean onT…...

Java学习路线第一篇:Java基础(2)

这篇则分享Java学习路线第一part&#xff1a;Java基础&#xff08;2&#xff09; 从看到这篇内容开始&#xff0c;你就是被选定的天命骚年&#xff0c;将承担起学完Java基础的使命&#xff0c;本使命为单向契约&#xff0c;你可选择YES或者选择YES。 具体路线安排&#xff1a…...

网络工程师精华篇,50种网络故障及解决方法大集合

上午好&#xff0c;我的网工朋友。 做网络工程师&#xff0c;自然离不开网络&#xff0c;而日常工作中能搞多少大项目&#xff1f;最常见的其实还是网络故障的处理了。 怎么最高效地排查网络故障&#xff1f;怎么简单几招通网&#xff1f; 今天就从基础的入手&#xff0c;分…...

Unity播放网络视频

using System.Collections; using System.Collections.Generic; using UnityEngine; using Mx.UI; using Mx.Utils; using UnityEngine.UI; using UnityEngine.Video; /// <summary> 视频UI面板 </summary> public class VideoUIForm : BaseUIForm { private …...

SCI一区级 | Matlab实现GWO-CNN-LSTM-selfAttention多变量多步时间序列预测

SCI一区级 | Matlab实现GWO-CNN-LSTM-selfAttention多变量多步时间序列预测 目录 SCI一区级 | Matlab实现GWO-CNN-LSTM-selfAttention多变量多步时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-CNN-LSTM-selfAttention灰狼算法优化卷积长短…...

线性分类器--图像表示

整个模型 图像表示 二进制图像 灰度图像 彩色图像 大多数分类算法都要求输入向量&#xff01; rbg的图像矩阵转列向量 大小为 32X32 的话&#xff0c;图像矩阵转列向量是多少维&#xff1f; 32x32x3 3072 维列向量...

车载通信架构 —— 传统车内通信网络FlexRay(较高速度高容错、较灵活拓扑结构)

车载通信架构 —— 传统车内通信网络FlexRay(较高速度高容错、较灵活拓扑结构) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,…...

Windows超级管理器:8MB小工具竟能替代10款软件?实测22项隐藏功能

Windows超级管理器&#xff1a;8MB小工具竟能替代10款软件&#xff1f;实测22项隐藏功能 每次打开Windows电脑&#xff0c;桌面上总堆满各种功能单一的小工具——内存清理、启动项管理、文件粉碎……每个软件都占着宝贵的存储空间&#xff0c;运行时还偷偷吃内存。直到发现这款…...

终极Flash解决方案:CefFlashBrowser让经典Flash游戏重获新生

终极Flash解决方案&#xff1a;CefFlashBrowser让经典Flash游戏重获新生 【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 在现代浏览器纷纷抛弃Flash支持的时代&#xff0c;你是否还在为那…...

VMware虚拟机中体验PyTorch:Ubuntu系统安装与GPU穿透配置指南

VMware虚拟机中体验PyTorch&#xff1a;Ubuntu系统安装与GPU穿透配置指南 1. 前言&#xff1a;为什么选择虚拟机学习PyTorch 对于刚接触深度学习的开发者来说&#xff0c;直接在物理机上安装PyTorch环境可能会遇到各种依赖冲突和配置问题。使用虚拟机可以创建一个隔离的学习环…...

游戏动画系统骨骼动画与状态混合

游戏动画系统是提升玩家沉浸感的关键技术&#xff0c;其中骨骼动画与状态混合的协同作用&#xff0c;让虚拟角色动作更流畅自然。从《巫师3》的剑术连招到《只狼》的格斗反馈&#xff0c;这两项技术如何实现动态衔接与过渡&#xff1f;本文将深入解析其核心机制与应用场景。 骨…...

基于C#和WPF的通用运动控制路径算法框架:快速建模,适用于多种机器视觉应用(激光切割、雕刻等...

C#wpf界面源码框架&#xff0c;总结运动控制路径算法而写&#xff0c;控件源码模板源码&#xff0c;分享给想入行的朋友们&#xff0c;引你快速入行&#xff0c;大神略过,可用于激光切割&#xff0c;雕刻机&#xff0c;分板机&#xff0c;点胶机&#xff0c;插件机等&#xff0…...

终极指南:gh_mirrors/ema/emacs.d的Vim模拟——Evil模式配置详解

终极指南&#xff1a;gh_mirrors/ema/emacs.d的Vim模拟——Evil模式配置详解 【免费下载链接】emacs.d Fast and robust Emacs setup. 项目地址: https://gitcode.com/gh_mirrors/ema/emacs.d 如果你是Vim爱好者但又想体验Emacs的强大功能&#xff0c;那么gh_mirrors/em…...

AcousticSense AI部署指南:基于Gradio的音频流派分析工作站搭建

AcousticSense AI部署指南&#xff1a;基于Gradio的音频流派分析工作站搭建 1. 引言&#xff1a;让AI“看见”音乐&#xff0c;从频谱中解读流派密码 你有没有想过&#xff0c;AI不仅能“听”音乐&#xff0c;还能“看”音乐&#xff1f;AcousticSense AI就是这样一个神奇的工…...

RobotStudio多版本共存避坑指南:5.0/6.0/2019版如何和平共处?

RobotStudio多版本共存实战指南&#xff1a;从兼容性到高效工作流 在工业机器人开发领域&#xff0c;ABB的RobotStudio是工程师们不可或缺的工具。随着项目需求的多样化&#xff0c;许多开发者发现单一版本的RobotStudio已经无法满足日常工作需要——旧项目维护需要5.0版本&…...

前端 WebAssembly:别再抱怨 JavaScript 性能慢了

前端 WebAssembly&#xff1a;别再抱怨 JavaScript 性能慢了 什么是前端 WebAssembly&#xff1f; WebAssembly&#xff08;简称 Wasm&#xff09;是一种低级的编译目标&#xff0c;允许用 C、C、Rust 等语言编写的代码在浏览器中运行&#xff0c;性能接近原生应用。别以为 Web…...

ConvNeXt 系列改进:ConvNeXt 添加 MetaFormer 风格池化层,简化 Block 并保持性能

2026 年的计算机视觉领域呈现出一种有趣的“返璞归真”趋势——在 Vision Transformer 狂飙数年之后,卷积神经网络正以全新的姿态强势回归。根据 Meta AI 近年来发布的官方论文数据,ConvNeXt 已经证明了一个关键事实:不需要 Attention 机制,纯 CNN 依然可以达到甚至超越同级…...