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元素。形如…

MySQL介绍及安装

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

字符串转换成十进制整数

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

【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;就好…

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

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

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

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

人工智能轨道交通行业周刊-第66期(2023.11.20-11.26)

本期关键词&#xff1a;智能铁鞋、TFDS、道岔密贴检查、Agent、Q*假说 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro轨道世界铁路那些事铁路…

多丽特膳:肥胖与七大营养素的关系、影响及作用

在探讨肥胖与身体的关系时&#xff0c;我们不能忽视七大营养素的重要作用。这些营养素包括碳水化合物、蛋白质、脂肪、维生素、矿物质、膳食纤维和水。它们对肥胖和身体的影响及作用各有不同&#xff0c;一起构成了我们日常饮食的基础&#xff0c;那么让我来给大家说道说道它们…

【2023传智杯】第六届传智杯程序设计挑战赛AB组-ABC题解题分析详解【JavaPythonC++解题笔记】

本文仅为第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记,个人解题分析记录。 本文包含:第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解 文章目录 一.前言二.比赛题目(AB俩组)A题题目B题题目C题题目三.解题代码A题解题思路解题代码【J…

每日一题 1457. 二叉树中的伪回文路径(中等,DFS)

一句话&#xff0c;深度搜索所有路径&#xff0c;判断路径是否伪回文 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right clas…

ddns-go部署在linux虚拟机

ddns-go部署ubuntu1804 1.二进制部署 1.虚拟机部署 1.下载linux的x86二进制包 wget https://github.com/jeessy2/ddns-go/releases/download/v5.6.3/ddns-go_5.6.3_linux_x86_64.tar.gz2.解压 tar -xzf ddns-go_5.6.3_linux_x86_64.tar.gz3.拷贝执行文件到PATH下&#xff0c…

通过视频文件地址截取图像生成图片保存为封面图

安装 RPM Fusion 软件库 FFmpeg并不包含在 CentOS 官方软件库中,需要使用第三方软件库安装。可以使用 RPM Fusion 软件库来获取 FFmpeg。 首先,使用以下命令安装 RPM Fusion 软件库: sudo yum install epel-release -y sudo rpm -Uvh https://download1.rpmfusion.org/fre…

《斯坦福数据挖掘教程·第三版》读书笔记(英文版)Chapter 3 Finding Similar Items

来源&#xff1a;《斯坦福数据挖掘教程第三版》对应的公开英文书和PPT It is therefore a pleasant surprise to learn of a family of techniques called locality-sensitive hashing, or LSH, that allows us to focus on pairs that are likely to be similar, without hav…