JS读取目录下的所有图片/require动态加载图片/文字高亮

news/2025/2/12 17:52:14

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/58e35c3ba26b46cca0cf8543764950a1.png

<template class="aa"><div class="demo-image__lazy container"><div class="head"><div class="left-bar"><div><span>综合</span></div><div><span>定位</span></div></div><div class="right-bar"><div><el-radio-groupv-model="value1"v-for="(item, index) in group1":key="index"><el-radio :label="index">{{ item }}</el-radio></el-radio-group></div><div><el-radio-group v-model="value2"><el-radio label="0">全部</el-radio><el-radio label="1">战士</el-radio><el-radio label="2">坦克</el-radio><el-radio label="3">刺客</el-radio><el-radio label="4">射手</el-radio><el-radio label="5">法师</el-radio><el-radio label="6">辅助</el-radio><el-inputclass="p"v-model="name"placeholder="请输入要查找的英雄"></el-input><el-button style="margin-left: 10px" @click="search">查询</el-button></el-radio-group></div></div></div><div class="foot"><div class="imageBox" v-for="url in images" :key="url.path"><el-imageclass="imgSize":src="require('@/assets/王者荣耀壁纸/' + url.path + '.jpg')"lazy></el-image><span v-html="url.heroName"></span></div></div><!-- ----------------------------------------------------------------- --><!-- <div class="demo-image__lazy image" v-for="url in images" :key="url"><el-imageclass="":src="require('@/assets/王者荣耀壁纸/' + url.path + '.jpg')"lazy><template #placeholder><div class="custom-loading">加载中...</div></template></el-image><span>{{ url.heroName }}</span></div> --></div>
</template><script>
//引入组件import StudyM from "./components/StudyM.vue"
export default {name: "Test",components: {StudyM,},data() {return {images: [], // 图片集合cloneImages: [], // 克隆图片集合name: undefined, // 输入框查找英雄group1: ["本周免费", "新手推荐"],value1: 0,value2: "0",// prefixImg: "@/assets/王者荣耀壁纸/",// suffixImg: ".jpg",}},watch: {// 周免英雄/新手推荐value1(newValue) {this.getImage(newValue, "heroNumber")},// 英雄类型value2(newValue) {this.getImage(newValue, "heroType")},// 输入框查询name(newValue) {this.getImage(newValue, "search")},},created() {this.test()},methods: {// 图片处理test() {const controllerFiles = require.context("@/assets/王者荣耀壁纸",true,/\.jpg$/)const controller = controllerFiles.keys().reduce((controller, controllerPath) => {const controllerName = controllerPath.replace(/^\.\/(.*)\.\w+$/, "$1")var heroName = controllerName.split("-")var type = this.getRandomNumber(1, 6)/*** type 英雄类型* 1: 战士  2:坦克  3:刺客  4:射手 5:法师 6:辅助*/var number = this.getRandomNumber(0, 1)/*** number 1: 本周免费  2:新手推荐*/this.images.push({path: controllerName,heroName: heroName[1],type: type,number: number,})}, {})this.cloneImages = JSON.parse(JSON.stringify(this.images))},// 查询英雄getImage(param1, param2) {this.images = JSON.parse(JSON.stringify(this.cloneImages))if (param2 === "heroNumber") {this.images = this.images.filter((item) => item.number == param1)} else if (param2 === "heroType") {if (!(param1 == "0")) {//英雄类型的查询条件非"全部"this.images = this.images.filter((item) => item.type == param1)}} else if (param2 === "search") {this.images = this.images.filter((item) =>item.heroName.includes(param1))this.images.forEach((item) => {// 搜索词高亮// i 匹配大小写  g匹配全部const reg = new RegExp(param1, "ig")item.heroName = item.heroName.replace(reg, (match) => {//替换对应字符return `<span style="color:red; font-weight: bold;">${match}</span>`})})}},search() {this.getImage(this.name, "search")},// 用随机数表示英雄类型getRandomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min},},
}
</script><style lang="scss" scoped>
@mixin pub-css {display: flex;flex-direction: column;justify-content: space-around;
}.custom-loading {color: #409eff;text-align: center;font-size: 14px;
}.head {height: 80px;display: flex;flex-direction: row;
}.left-bar {width: 80px;background: red;@include pub-css;align-items: center;
}.right-bar {width: 100%;background: darkblue;@include pub-css;& div {margin-left: 10px;}& :nth-child(2) {.p {width: 160px;margin-left: 200px;}}
}.foot {margin-top: 25px;display: grid;grid-template-columns: repeat(auto-fill, 95px);grid-template-rows: repeat(auto-fill, 95px);gap: 24px 35px;.imageBox {margin-left: 15px;text-align: center;}.imgSize {width: 95px;height: 95px;border: 1px solid;border-top-left-radius: 10px;border-bottom-right-radius: 10px;}
}
</style>
  问题:为什么require的变量跟字符串要分开写,而不能提前拼接到一起// webpack本身是一个预编译的打包工具,无法预测未知变量路径 不能require纯变量路径。// 如果提前拼接好路径会被当作静态资源处理require 是 node.js 中的一个方法:作用是 “用于引入模块、 JSON、或本地文件”。也就是说如果我们使用 require 来引入一个图片文件的话,那么 require 返回的就是用于引入的图片(npm 运行之后图片的编译路径)。 而如果使用字符串的话,那么则是一个 string 类型的固定字符串路径。我们知道,src 中引入的图片应该为图片的本身路径(相对路径或者绝对路径),而 vue 项目通过 webpack 的 devServer 运行之后,默认的 vue-cli 配置下,图片会被打包成 name.hash 的图片名,在这种情况下,如果我们使用固定的 字符串路径则无法找到该图片,所以需要使用 require 方法来返回 图片的编译路径。

https://dhexx.cn/news/show-5391613.html

相关文章

C++ 18 之 函数的重载

c18函数的重载.cpp #include <iostream> #include <string.h> using namespace std;void fun4(int a) {cout << "int a: "<< a << endl; } void fun4(double a) {cout << "double a: " << a << endl; }v…

centos7.9如何启动vnc服务

安装步骤 # 安装vncserver yum install tigervnc-server# copy配置文件 cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vncserver@:1.service#修改user用户 vim /etc/systemd/system/vncserver@:1.service# 重新加载systemd管理配置文件 systemctl daemon-r…

私人云盘(自动云同步)

一、项目简介 模仿小米的云服务&#xff0c;实现一个通过TCP实现的私人云盘&#xff0c;因为能力有限&#xff0c;所以只实现自动云同步这一个功能&#xff0c;具体可以分为三个小功能&#xff0c;即保持云端和终端数据一致、实现文件的上传与下载以及手动同步 二、涉及到的知…

lvgl手势事件判断为点击事件问题

lvgl手势事件判断为点击事件问题处理方法 1.打开文件lvgl\src\core\lv_indev.c 2. 修改函数 static void indev_proc_release(_lv_indev_proc_t * proc)2.1 由原来的 /*** Process the released state of LV_INDEV_TYPE_POINTER input devices* @param proc pointer to an …

Rust 异步 trait 的实现困难

在 Rust 中&#xff0c;异步编程是使用 async/await 语法来实现的。与传统的同步编程不同&#xff0c;异步编程涉及到的特性较多&#xff0c;其中一个重要的特性是异步 trait。 异步 trait 是具有异步方法的 trait。在 Rust 中&#xff0c;trait 方法默认是同步的&#xff0c;…

【Numpy】一文向您详细介绍 np.floor()

【Numpy】一文向您详细介绍 np.floor() 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&#xff0c;…

IDEA启动正常debug启动报错

项目场景&#xff1a; 很奇怪的一个问题,项目运行正常,debug启动直接报错,运行不起来 Exception in thread "main" java.lang.ClassNotFoundException: kotlinx.coroutines.debug.AgentPremainat java.net.URLClassLoader.findClass(URLClassLoader.java:382)at ja…

dns填跟网关一样是什么原理?(dns网关)

文章目录 现象原因 现象 看很多人喜欢把网关填到dns里&#xff0c;这是什么原理&#xff1f; 原因 在网络配置中&#xff0c;将DNS服务器地址设置为与网关地址相同的情况并不罕见&#xff0c;尤其是在小型网络或家用网络中。这种设置背后的原理和实践如下&#xff1a; 网关设…

【C语言】assert.h——断言

文章目录 主要内容调试和发布模式使用示例用法总结与注意事项 断言是一种用于在程序执行过程中进行调试的工具&#xff0c;能够帮助开发者验证程序的某些假设是否为真。如果断言失败&#xff0c;程序会终止&#xff0c;并输出一个错误消息&#xff0c;通常包含出错的文件名和行…

时钟和系统控制

https://adi.eetrend.com/files/2017-09/wen_zhang_/100008016-26548-shizhongyupinluhechengjibenyuanli20170913.pdf 什么是时钟?常用频率是多少? 与数据波形不同,时钟信号是一个方波,其频率通常是恒定的。 常用频率包括: GPS 使用 1 pps(脉冲/秒)有线通信常用8 kH…