Vue3+vite 处理静态资源,解决服务器不显示动态循环img问题

注意:

        vue2+webpack中,通常使用require来动态渲染静态资源。但在vue3+vite中,不支持require语法,因此使用require会报undefined,所以官方推荐使用import来动态渲染静态资源。

实现方式动态渲染静态资源

vue2+webpack

使用require引入静态资源  require(‘xxxx’ + 变量)

  		<div:class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"v-for="(item, index) in schoolTagsList":key="index"@click="getCurrentTypeSchoolList(item)"><img class="tag-icon" :src="require(`../../assets/img/${item.code}.png`)" alt="" /> {{ item.value}}</div>

vue3+vite

使用 new URL(url, import.meta.url)

vite官网静态资源处理 new URL(url, import.meta.url)
import.meta.url : ESM 的原生功能,会暴露当前模块的 URL
与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL

注意哈

注意这个 URL 字符串必须是静态的,这样才能分析 
否则代码将被原样保留,因而在 build.target 不支持 import.meta.url 时会导致运行时错误

 function test(name) {return new URL(`../${name}.png`, import.meta.url).href
}

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

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

相关文章

RabbitMQ 搭建和工作模式

MQ基本概念 1. MQ概述 MQ全称 Message Queue&#xff08;[kjuː]&#xff09;&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信。 &#xff08;队列是一种容器&#xff0c;用于存放数据的都是容器&#xff0…

力扣每日一题-HTML实体解析器-2023.11.23

力扣每日一题&#xff1a;HTML实体解析器 开篇 这是今天的每日一题&#xff0c;中等难度&#xff0c;只要有耐心&#xff0c;应该是能够写出来的。下面给大家分享我的思路与代码。 题目链接: 1410.HTML实体解析器 题目描述 代码思路 1.创建一个哈希表&#xff0c;把要替换的…

二十四、RestClient操作文档

目录 一、新增文档 1、编写测试代码 二、查询文档 1、编写测试代码 三、删除文档 1、编写测试代码 四、修改文档 1、编写测试代码 五、批量导入文档 批量查询 一、新增文档 1、编写测试代码 SpringBootTest public class HotelDocumentTest {private RestHighLevelC…

如何开启MySQL的慢查询日志

说明&#xff1a;如果需要查看某一条SQL查询速度慢&#xff0c;并对慢的SQL进行优化&#xff0c;那么开启MySQL慢查询日志是一定要做的事情&#xff0c;本文介绍如何开启MySQL的慢查询日志&#xff1b; 查看MySQL慢查询是否开启 首先&#xff0c;输入下面的命令&#xff0c;查…

CP_AUTOSAR分层软件架构内容简介

目录 0、前言1、综述1.1 AUTOSAR应用范围及拓展性1.2 架构总体介绍 0、前言 随着汽车功能需求日益增加&#xff0c;稳定安全的AUTOSAR分层软件架构逐渐作为一个热词呈现在汽车电子软件开发领域。那么AUTOSAR分层软件架构到底包括了哪些内容&#xff1f;架构之间的是什么关系&am…

QtCreator9.02不支持JDK11解决

最终效果 使用Android Studio 下载Android SDK Platform 31与Sources for Android 31 下载Android SDK Build Tools 31.0.0 下载NDK 25.1 ,23.1 ,21.3 重要: 下载Android SDK Command-Line Tools ,选择10.0或者9.0其中一个版本 其它版本不支持JDK11 ,本例选择10.0 下载CMak…

Java项目如何打包成Jar(最简单)

最简单的办法&#xff0c;使用Maven插件&#xff08;idea自带&#xff09; 1.选择需要打包的mudule&#xff0c;点击idea右侧的maven插件 2.clean操作 3.选择需要的其他mudule&#xff0c;进行install操作&#xff08;如果有&#xff09; 4.再次选择需要打包的module&#…

nodejs微信小程序+python+PHP -留学信息查询系统的设计与实现-安卓-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

【论文阅读笔记】Smil: Multimodal learning with severely missing modality

Ma M, Ren J, Zhao L, et al. Smil: Multimodal learning with severely missing modality[C]//Proceedings of the AAAI Conference on Artificial Intelligence. 2021, 35(3): 2302-2310.[开源] 本文的核心思想是探讨和解决多模态学习中的一个重要问题&#xff1a;在训练和测…

Electron+VUE3开发简版的编辑器【文件预览】

简版编辑器的功能主要是: 打开对话框,选择文件后台读取文件文件前端展示文件内容。主要技术栈是VUE3、Electron和Nodejs,VUE3做页面交互,Electron提供一个可执行Nodejs的环境以及支撑整个应用的环境,nodeJS负责读取文件内容。 环境配置、安装依赖这些步骤就不再叙述了。 …

SSM家具个性定制管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 家具个性定制管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用…

黑马点评12-实现好友关注/取关功能,查看好友共同关注列表

好友关注 数据模型 数据库中的tb_follow记录博主与粉丝的关系 tb_follow表对应的实体类 Data EqualsAndHashCode(callSuper false) Accessors(chain true) TableName("tb_follow") public class Follow implements Serializable {private static final long ser…