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

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

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

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

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

相关文章

OpenAI Sora引领AI跳舞视频新浪潮:字节跳动发布创新舞蹈视频生成框架

OpenAI的Sora已经引起广泛关注,预计今年AI跳舞视频将在抖音平台上大放异彩。下面将为您详细介绍一款字节跳动发布的AI视频动画框架。 技术定位:这款框架采用先进的diffusion技术,专注于生成人类舞蹈视频。它不仅能够实现人体动作和表情的迁移…

高校学科竞赛平台|基于springboot高校学科竞赛平台设计与实现(源码+数据库+文档)

高校学科竞赛平台目录 目录 基于springboot高校学科竞赛平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、竞赛题库管理 2、竞赛信息管理 3、晋级名单管理 4、往年成绩管理 5、参赛申请管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最…

STM32F10X(Cortex-M3)系统定时器寄存器笔记和系统定时器精准延时函数

Cortex-M3系统定时器寄存器笔记和系统定时器精准延时函数 简介系统定时器寄存器STK_CTRLSTK_LOADSTK_VALSTK_CALIB STM32F10X(Cortex-M3)精准延时函数 简介 在STM32F10X(Cortex-M3)除了通用定时器和看门狗定时器外,还有一个系统定时器(SysTick) 拿STM32F103C8T6来说…

开年炸裂-Sora/Gemini

最新人工智能消息 谷歌的新 Gemini 模型 支持多达 1M的Token,可以分析长达一小时的视频 1M Token可能意味着分析700,000 个单词、 30,000 行代码或11 小时的音频、总结、改写和引用内容。 Comment:google公司有夸大的传统,所以真实效果需要上…

开源 - 一款可自定义的在线免杀平台|过x60、wd等

免责声明:本工具仅供安全研究和教学目的使用,用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任,且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规,并理解并同意本声明…

Docker硬件直通:如何在容器中高效利用GPU与硬盘资源

Docker硬件直通:如何在容器中高效利用GPU与硬盘资源 引言Docker基础容器与虚拟机的区别Docker的工作原理 访问服务器硬件资源概述为何需要在Docker容器中访问硬件资源可访问的硬件资源类型 在Docker中使用GPU配置Docker以使用宿主机的GPU资源安装NVIDIA Docker插件 …

【算法与数据结构】1020、130、LeetCode飞地的数量 被围绕的区域

文章目录 一、1020、飞地的数量二、130、被围绕的区域三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、1020、飞地的数量 思路分析:博主认为题目很抽象,非常难理解。想了好久,要理解…

【C++】STL容器之string(一)

💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …

C语言----字符数组指针

1.char arr[] {a,b,c,d,e,f}; sizeof分析类型就可以计算所占的内存空间的大小; (1)printf("%d\n", sizeof(arr)); 数组名单独放进里面,计算整个数组大小,所以是6字节; (2&#xff…

计算以10为底的对数 math.log10(x)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算以10为底的对数 math.log10(x) [太阳]选择题 以下代码的输出结果中正确的是? import math print("【执行】math.log10(10)") print(math.log10(10)) print("【执行】math…

尚未创建默认 SSL 站点。若要支持不带 SNI 功能的浏览器,建议创建一个默认 SSL 站点。

在 Windows Server 2012 IIS 站点中设置 SSL 证书后,IIS 右上角提示: 尚未创建默认 SSL 站点。若要支持不带 SNI 功能的浏览器,建议创建一个默认 SSL 站点。 该提示客户忽略不管,但是若要支持不带 SNI(Server Name Indication)…

Retrofit2原理分析

Retrofit官网 GitHub上的Retrofit 使用Retrofit进行网络请求的主要步骤 创建一个接口 用于描述HTTP请求。接口里的方法使用注解来标记请求方式、API路径、请求参数等信息。使用Retrofit.Builder().build();配置和创建一个Retrofit实例;调用retrofit.create()方法获…

零到大师:嵌入式Linux学习书单分享

大家好,我是知微! 上一篇推荐的书单嵌入式软件必读10本书_单片机篇,收到反响很好。再推荐一篇嵌入式Linux相关的书单。 《鸟哥的Linux私房菜》 鸟哥的Linux系列适合零基础小伙伴,从电脑基础到文件系统、shell脚本等等&#xff…

C++之Easyx——图形库的基本功能(1):界面操作

最近,我觉得使用控制台编写游戏太没意思了!! 所以我开始研究图形库了~ 一、setinitmode 函数定义 void EGEAPI setinitmode(int mode, int x CW_USEDEFAULT, int y CW_USEDEFAULT); //设置初始化模式,mode0为普通&#xff0c…

Linux篇:开发工具yum/vim/gcc/g++/Makefile/gdb

一. yum:软件包管理器 什么是软件包? 在Linux 下安装软件 , 一个通常的办法是下载到程序的源代码 , 并进行编译 , 得到可执行程序 . 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好 , 做成软件包 (可以理解成windows 上的安装程序) 放在…

遥遥领先的大语言模型GPT-4的图像合成能力如何?

遥遥领先的多模态大语言模型GPT-4的图像合成能力如何?今天分享一个建立了一个用于评估GPT-4生成图像中纹理特征保真度的基准,其中包括手工绘制的图片及其AI生成的对应物。本研究的贡献有三个方面:首先,对基于GPT-4的图像合成特征的…

C++ 之LeetCode刷题记录(三十三)

😄😊😆😃😄😊😆😃 开始cpp刷题之旅。 目标:执行用时击败90%以上使用 C 的用户。 11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线,…

存内计算的主流技术方案

1 概述 和近数据计算不同,存内计算直接使用内存单元做计算,主要利用电阻和电流电压的物理关系表达运算过程。存内计算依赖于新型的非易失性存储器,如 ReRAM和 PCM 等。在所有存内计算操作中,最普遍的是利用基尔霍夫定律&#xff0…

shell基础实验(1)

1、判断当前磁盘剩余空间是否有20G,如果小于20G,则将报警邮件发送给管理员,每天检查次磁盘剩余空间。 1.1.安装邮件服务,配置邮件服务 [rootserver ~]# yum install mailx -y[rootserver ~]# vim /etc/mail.rc set from1580540058qq.com …

2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用

前言 一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢,每次都能带来一些最前沿的方向标,这次也不例外。在看完一些 keynote 和介绍之后,我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。…