vue如何动态加载显示本地图片资源

news/发布时间2024/5/15 9:56:41

在实际开发中,根据某一个变量动态展示图片的情况有很多。实现方法分打包构建工具的差异而不同。
1、webpack的项目
require引入图片资源
在这里插入图片描述
2、vite的项目
new URL(url,base).href
在这里插入图片描述

疑问解答:为什么vite项目不可以用require?
原因在于,vite的模块化规范是ES Modules,所以vite项目在打包构建时无法解析require(commentJS规范里引入资源的语法)引入资源的方式。

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

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

相关文章

常见消息中间件

ActiveMQ 我们先看ActiveMQ。其实一般早些的项目需要引入消息中间件,都是使用的这个MQ,但是现在用的确实不多了,说白了就是有些过时了。我们去它的官网看一看,你会发现官网已经不活跃了,好久才会更新一次。 它的单机吞…

网络安全-pikachu之文件上传漏洞2

进入到第二个文件上传漏洞,发现名字是MIME type,并且查看前端源代码没发现限制,所以是后段,盲猜通过抓包就可以绕过后段限制。 先知道MIME type是什么,通过查找资料发现是:Content-Type是返回消息中非常重…

【代码随想录python笔记整理】第十二课 · 位置互换

前言:本笔记仅仅只是对内容的整理和自行消化,并不是完整内容,如有侵权,联系立删。 一、变量交换的实现 这节我们讨论一个简单的问题——怎么交换两个变量的值。比如说,一个瓶子里是水,一个瓶子里是油,想要将两个瓶子中的东西互换,我们应该怎么做呢?要实现上述过程,我们…

前端-游览器渲染原理

渲染 render vue react render 游览器渲染 html字符串 - > 像素信息 游览器是如何渲染页面的? 当游览器的网络线程收到 html文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列 在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程. 整…

notepad++运行python闪一下就没啦

问题:Notepad直接快捷键运行Python代码,出现闪一下就没了 解决措施: ①点击菜单运行(Run) --> 运行(Run)弹出的对话框 ②把 cmd /k python "$(FULL_CURRENT_PATH)" & ECHO. & PAUSE & EXIT 粘贴进入这个对话框内 ③点击保存&a…

C#串口 Modbus通讯工具类

一、安装Modbus包 二、创建modbushelper类 1、打开串口 public bool IfCOMOpend; //用于实例内的COM口的状态 public SerialPort OpenedCOM;//用于手动输入的COM转成SERIAL PORT /// <summary> /// 打开串口 /// </summary> /// <param name="COMname&quo…

总线中的match函数-笔记

嵌入式软件的bus_type 结构中的一个成员 .match 成员&#xff0c;是一个函数。用来在现有的设备驱动中匹配新插入的设备。匹配方式有4种(设备树、ACPI&#xff0c;id_tables, name)。 以platform总线为例&#xff0c;platform_bus_type 实例的match 为 platform_match, platfo…

QT_day2

1.思维导图 2.使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff…

Go语言的100个错误使用场景(48-54)|错误管理

前言 大家好&#xff0c;这里是白泽。**《Go语言的100个错误以及如何避免》**是最近朋友推荐我阅读的书籍&#xff0c;我初步浏览之后&#xff0c;大为惊喜。就像这书中第一章的标题说到的&#xff1a;“Go: Simple to learn but hard to master”&#xff0c;整本书通过分析1…

高效的FTP替代产品,如何解决FTP文件传输存在的弊端?

FTP最初并不是为IP网络设计的&#xff0c;而是在ARPANET&#xff08;Advanced Research Projects Agency Network&#xff0c;美国国防部高级研究计划署网络&#xff09;中作为计算机间文件传输的协议。1971年&#xff0c;Abhay Bhushan提出了FTP的第一个RFC&#xff08;Reques…

Out of memory,realloc failed

git config --global http.postBuffer 1048576000

SpringBoot整合GateWay(详细配置)

前言 在Spring Boot中整合Spring Cloud Gateway是一个常见的需求&#xff0c;尤其是当需要构建一个微服务架构的应用程序时。Spring Cloud Gateway是Spring Cloud生态系统中的一个项目&#xff0c;它提供了一个API网关&#xff0c;用于处理服务之间的请求路由、安全、监控和限流…

PyCharm 主题和字体 (Scheme Editor Font)

PyCharm 主题和字体 [Scheme & Editor Font] References Scheme & Editor Font File -> Settings -> Editor -> Colors & Fonts -> Font Show only monospaced fonts&#xff1a; 只显示等宽字体。编程时使用等宽字体效果较好。 References [1] Yon…

世界顶级名校计算机专业,都在用哪些书当教材?

清华、北大、MIT、CMU、斯坦福的学霸们在新学期里要学什么&#xff1f;今天我们来盘点一下那些世界名校计算机专业采用的教材。 欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 作者…

Linux-文件文件夹相关命令

目录 常见命令 1. 创建空目录&#xff1a;mkdir 文件夹名 2. 删除空目录&#xff1a;rmdir 文件夹名 3. 创建多级目录&#xff1a;mkdir -p 123/abc 4. 删除非空文件 rm -rf 文件夹名 5. 创建文件&#xff1a; touch 文件名.后缀 / vi 文件名.后缀 6. 删除文件&#x…

MyBatisPlus常用注解

目录 一、TableName 二、TableId 三、TableField 四、TableLogic 一、TableName 在使用MyBatis-Plus实现基本的CRUD时&#xff0c;我们并没有指定要操作的表&#xff0c;只是在Mapper接口继承BaseMapper时&#xff0c;设置了泛型User&#xff0c;而操作的表为user表 由此得出…

解决Uncaught SyntaxError: Cannot use import statement outside a module(at XXX)报错

报错原因&#xff1a;这个错误通常是因为你正在尝试在一个不支持 ES6 模块语法的环境中使用 import 语句。这可能是因为你的代码是在一个只支持 CommonJS 或 AMD 模块系统的环境中运行的&#xff0c;或者你的代码运行的环境没有正确配置以支持 ES6 模块。如果是在浏览器环境&am…

Day 30 标准IO

文章目录 1.什么是标准IO1.1 概念1.2 特点1.3 操作 2.缓存区3.函数接口3.1 打开文件fopen3.2 关闭文件 fclose3.3 读写文件操作3.3.1 每次读写一个字符&#xff1a;fgetc()、fputc()每次读一个字符fgetc()每次写一个字符fputc()(1)针对文件(2)针对终端feof和ferror 3.3.2 每次一…

Linux常见指令(一)

目录 一、基本指令 1.1ls指令 1.2pwd指令 1.3cd指令 1.4touch指令 1.5mkdir指令 1.6rmdir指令、rm指令 1.7man指令 1.8cp指令 1.9mv指令 1.10cat 一、基本指令 1.1ls指令 语法 &#xff1a; ls [ 选项 ][ 目录或文件 ] 功能&#xff1a;对于目录&#xff0c;该命令…

c++类和对象新手保姆级上手教学(下)

目录 前言&#xff1a; 初始化列表&#xff1a; explicit关键字&#xff1a; static成员&#xff1a; 友元函数&#xff1a; 友元类&#xff1a; 内部类&#xff1a; 匿名对象&#xff1a; 前言&#xff1a; 类和对象下篇中剩余的部分较为简单易理解&#xff0c;认真记住…
推荐文章