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

2024-06-16 01:28

本文主要是介绍JS读取目录下的所有图片/require动态加载图片/文字高亮,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

![在这里插入图片描述](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 方法来返回 图片的编译路径。

这篇关于JS读取目录下的所有图片/require动态加载图片/文字高亮的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1065128

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

动态规划---打家劫舍

题目: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你 不触动警报装置的情况下 ,一夜之内能够偷窃到的最高金额。 思路: 动态规划五部曲: 1.确定dp数组及含义 dp数组是一维数组,dp[i]代表

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏