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.mzph.cn/news/169877.shtml

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

相关文章

JVM的小知识总结

加载时jvm做了这三件事&#xff1a; 1&#xff09;通过一个类的全限定名来获取该类的二进制字节流 什么是全限定类名&#xff1f; 就是类名全称&#xff0c;带包路径的用点隔开&#xff0c;例如: java.lang.String。 即全限定名 包名类型 非限定类名也叫短名&#xff0c;就…

不会做UI自动化测试?一起设计框架再实践吧

目的 相信做过测试的同学都听说过自动化测试&#xff0c;而UI自动化无论何时对测试来说都是比较吸引人的存在。 相较于接口自动化来说它可以最大程度的模拟真实用户的日常操作与特定业务场景的模拟&#xff0c;那么存在即合理&#xff0c;自动化UI测试自然也是广大测试同学职…

Docker Swarm总结+基础、集群搭建维护、安全以及集群容灾(1/3)

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…

css中flex两列布局(一列自适应其他固定)

问题 最近写一个布局的时候&#xff0c;遇到一个问题。如下图的布局。在没有图片的时候布局是正常的&#xff0c;如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。 我的解决方式是让图片不缩放&#xff0c;图片外层再添加一个div元素。形如…

Locust AI 例子

Locust AI 例子 以下是一个关于Locust AI的例子&#xff1a; 假设我们要对一个Web API进行性能测试。首先&#xff0c;我们需要安装Locust并编写测试代码。以下是一个简单的代码示例&#xff1a; python from locust import HttpUser, task, betweenclass MyUser(HttpUser):…

MySQL介绍及安装

MySQL介绍及安装 一、MySQL概述 1、关系型数据库与非关系型数据库 RDBMS&#xff08;relational database management system&#xff09;&#xff0c;既关系型数据库管理系统。 简单来说&#xff0c;关系型数据库&#xff0c;是指采用了二维表格来组织数据的数据库。 扩展…

Calling COBOL Modules 调用COBOL模块

Calling COBOL Modules 调用COBOL模块 Using the PeopleCode RemoteCall function, you can call COBOL modules from a PeopleCode action. This option supports existing Application Engine programs that call COBOL modules. You also can use it to upgrade Applicati…

vue 中如何编写可复用的组件

在Vue中编写可复用的组件的关键是遵循一些最佳实践和设计原则。以下是一些编写可复用组件的技巧&#xff1a; 遵循 Vue 的官方设计原则&#xff1a;Vue 的设计原则包括组件化、数据驱动、可组合性和简洁性。这些原则可以帮助你编写可复用和可维护的组件。命名规范&#xff1a;…

字符串转换成十进制整数

编程要求 输入一个以#结束的字符串&#xff0c;本题要求滤去所有的非十六进制字符&#xff08;不分大小写&#xff09;&#xff0c;组成一个新的表示十六进制数字的字符串&#xff0c;然后将其转换为十进制数后输出。如果在第一个十六进制字符之前存在字符“-”&#xff0c;则…

Android修行手册-一个滑动旋转的弧形菜单

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列

springboot3.x+springsecurity6.x多种方式登录验证

最新的 Spring Security 5.7 及以上版本&#xff0c;更新了不少内容&#xff0c;之前的 WebSecurityConfigurerAdapter 已经被废弃了&#xff0c;而且&#xff0c;要同时实现用户名密码登录、手机验证码登录、邮箱、微信小程序等登录方式&#xff0c;跟之前的配置方式都会有所不…

Using the File Class使用文件类

Using the File Class 使用文件类 The file layout class enables you to perform file input and output operations with Application Engine using PeopleCode. A file object enables you to open a file (for reading or writing), read data from a file, or write da…

【Qt绘制仪表盘】

目的 使用Qt的绘制事件绘制一个仪表盘 思路 需要创建一个带绘制事件的控件重写绘制事件显示 实现 以下是实现代码&#xff0c;可复制到程序到&#xff0c;直接运行。 .h // GaugeWidget.h #ifndef GAUGEWIDGET_H #define GAUGEWIDGET_H#include <QWidget>class Ga…

Ubuntu开机显示recovering journal,进入emergency mode

在一次正常的shutdown -r now之后&#xff0c;服务器启动不起来了&#xff0c;登录界面显示recovering journal&#xff0c;主要报错信息如下所示&#xff1a; /dev/sda2:recovering journal /dev/sda2:Clearn... You are in emergency mode. After logging in, type journalc…

Kotlin学习——流程控制,when,循环,range工具 kt里的equals if实现类似三元表达式的效果

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…

Elasticsearch集群部署 head监控插件 Kibana部署 Nginx反向代理 Logstash部署

一、组件介绍1、Elasticsearch&#xff1a;2 、Logstash3、Kibana4、Kafka&#xff1a;5、Filebeat: 二、 Elasticsearch集群部署服务器创建用户安装ES修改配置文件创建数据和日志目录设置JVM堆大小 #7.0默认为4G修改安装目录及存储目录权限系统优化&#xff08;1&#xff09;增…

一定要会用selenium的等待,三种等待方式解读

​很多人问&#xff0c;这个下拉框定位不到、那个弹出框定位不到…各种定位不到&#xff0c;其实大多数情况下就是两种问题&#xff1a; 有frame 没有加等待 殊不知&#xff0c;你的代码运行速度是什么量级的&#xff0c;而浏览器加载渲染速度又是什么量级的&#xff0c;就好…

springboot(ssm大学生创业网站 毕业生创业平台Java(codeLW)

springboot(ssm大学生创业网站 毕业生创业平台Java(code&LW) 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#x…

vs2015如何远程启动程序来进行调试

vs远程调试的方式有两种&#xff0c;远程启动方式和附加进程方式。   一般来说&#xff0c;咱们使用vs调试代码时&#xff0c;直接附加进程即可&#xff0c;但某些时候附加进程方式无法命中断点。比如我们想调试的C代码&#xff0c;但是调试的入口程序是C#程序&#xff0c;如…

经典的回溯算法题leetcode棋盘问题思路代码详解

目录 棋盘问题 leetcode51题.N皇后 对回溯算法感兴趣的朋友也可以多多支持一下我的其他文章。 回溯算法详解-CSDN博客 经典的回溯算法题leetcode组合问题整理及思路代码详解-CSDN博客 经典的回溯算法题leetcode子集问题思路代码详解-CSDN博客 经典的回溯算法题leetcode全…