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

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

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

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

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

相关文章

Elastic Stack--01--简介、安装

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1. Elastic Stack 简介为什么要学习ESDB-Engines搜索引擎类数据库排名常年霸榜![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/051342a83f574c8c910cda…

微信小程序独立分包与分包预下载

官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等;App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为独立分包中暂时不支持使用…

cocos creator3.x项目打包成aar 加入到已有的Android工程

Cocos crearor版本: 3.4.2 Android Studio Flamingo | 2022.2.1 Patch 2 1、配置构建安卓项目 2、 运行编译无报错 出现问题可尝试修改Gradle版本 修改jdk版本 3、对libservice打包成aar 打包完后 再build/outputs找到aar 如果看不到Tasks模块,在Fil…

人机交互新研究:MIT开发了结合脑电和眼电的新式眼镜,与机器狗交互

还记得之前的AI读心术吗?最近,「心想事成」的能力再次进化, ——人类可以通过自己的想法直接控制机器人了! 来自麻省理工的研究人员发表了Ddog项目,通过自己开发的脑机接口(BCI)设备&#xff…

面试答疑03

1、登录鉴权怎么做的?为什么采用jwt的方式?有什么好处? Java登录鉴权常见的实现方式包括**CookieSession、HTTP Basic Authentication、ServletJDBC**等。 在Java的Web应用中,登录鉴权是确认用户身份的关键环节。一个常用的传统…

Vue项目启动过程全记录(node.js运行环境搭建)

一、安装node.js并配置环境变量 1、安装node.js 从Node.js官网下载安装包并安装。然后在安装后的目录(如果是下载的压缩文件,则是解压缩的目录)下新建node_global和node_cache这两个文件夹。 node_global:npm全局安装位置 node_…

机器学习面试:逻辑回归与朴素贝叶斯区别

逻辑回归与朴素贝叶斯区别有以下几个方面: (1)逻辑回归是判别模型,朴素贝叶斯是生成模型,所以生成和判别的所有区别它们都有。 (2)朴素贝叶斯属于贝叶斯,逻辑回归是最大似然,两种概率哲学间的区别。 (3)朴素贝叶斯需要条件独立假设…

【刷题】牛客 JZ64 求1+2+3+...+n

刷题 题目描述思路一 (暴力递归版)思路二 (妙用内存版)思路三 (快速乘法版)思路四 (构造巧解版)Thanks♪(・ω・)ノ谢谢阅读!&#xff01…

高盛:日本这轮通胀是否可持续,关键看房租

租金在日本CPI中的权重高达20%,高盛预计短期内租金将继续拖累通胀至1.7%或以下,长期有望温和上行,使通胀稳在2%的水平。 日本正在转向“去通缩”,房租能否支撑通胀态势? 在日股今年一路高歌、有望“收复失地”时&…

unity-firebase-Analytics分析库对接后数据不显示原因,及最终解决方法

自己记录一下unity对接了 FirebaseAnalytics.unitypackage(基于 firebase_unity_sdk_10.3.0 版本) 库后,数据不显示的原因及最终显示解决方法: 1. 代码问题(有可能是代码写的问题,正确的代码如下&#xff…

OpenTiny Vue 组件库适配微前端可能遇到的4个问题

本文由体验技术团队 TinyVue 项目成员岑灌铭同学创作。 前言 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略,每个应用可以选择不同的技术栈,独立开发、独立部署。 TinyVue组件库的跨技术栈能力与微前端十…

springboot207基于springboot的实习管理系统

实习管理系统的设计与实现 摘要 近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定实习管理系统的总体功…

H5星空渐变效果引导页源码

H5星空渐变效果引导页源码 源码介绍:H5星空渐变效果引导页源码是一款带有星空渐变效果的源码,内含3个可跳转旗下站点按钮。 下载地址: https://www.changyouzuhao.cn/8344.html

【海贼王的数据航海:利用数据结构成为数据海洋的霸主】时间复杂度 | 空间复杂度

目录 1 -> 算法效率 1.1 -> 如何衡量一个算法的好坏? 1.2 -> 算法的复杂度 2 -> 时间复杂度 2.1 -> 时间复杂度的概念 2.2 -> 大O的渐进表示法 2.3 -> 常见时间复杂度计算 3 -> 空间复杂度 4 -> 常见复杂度对比 1 -> 算法效…

SQL注入漏洞解析

什么是SQL注入 原理: SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数据库服…

【Vuforia+Unity】AR01实现单张多张图片识别产生对应数字内容

1.官网注册 Home | Engine Developer Portal 2.下载插件SDK,导入Unity 3.官网创建数据库上传图片,官网处理成数据 下载好导入Unity! 下载好导入Unity! 下载好导入Unity! 下载好导入Unity! 4.在Unity设…

图——最小生成树实现(Kruskal算法,prime算法)

目录 预备知识: 最小生成树概念: Kruskal算法: 代码实现如下: 测试: Prime算法 : 代码实现如下: 测试: 结语: 预备知识: 连通图:在无向图…

Sora的第一波受害者出现了。

不知道大家最近除了被Sora刷屏之外,有没有被这张图刷屏 我只能说网友太强大了 说实话,我进入舟老师的直播间,每次都是还有3分钟下播,还有6单就拍完 但是10分钟后还在激情逼单,6单之后还有6单 也许在营销学上&#x…

C++笔记:OOP三大特性之多态

前言 本博客中的代码和解释都是在VS2019下的x86程序中进行的,涉及的指针都是 4 字节,如果要其他平台下测试,部分代码需要改动。比如:如果是x64程序,则需要考虑指针是8bytes问题等等。 文章目录 前言一、多态的概念二、…

【C++初阶】系统实现日期类

目录 一.运算符重载实现各个接口 1.小于 (d1)<> 2.等于 (d1d2) 3.小于等于&#xff08;d1<d2&#xff09; 4.大于&#xff08;d1>d2&#xff09; 5.大于等于&#xff08;d1>d2&#xff09; 6.不等于&#xff08;d1!d2&#xff09; 7.日期天数 (1) 算…