动态计算加载图片

学习啦
别名路径:①npm install path --save-dev②配置
// vite.config,js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'import { viteStaticCopy } from 'vite-plugin-static-copy' import path from 'path' export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src') // 使用 Vite 的 resolve 方法}},plugins: [vue(),],server: {fs: {// 允许从一个级别到项目根目录提供文件allow: ['..']},middlewareMode: false,proxy: {'/api': {// 指定目标服务器的地址target: 'http://baidu.com',// changeOrigin: 设置为 true 时,会修改请求头中的 host 字段为目标服务器的主机名,这有助于解决某些服务器对 host 头的严格检查changeOrigin: true,// 用于重写请求路径。这里将所有以 /api 开头的路径重写为空字符串,即去掉 /api 前缀。pathRewrite: { '^/api': '' },// 添加日志记录 设置为 debug 可以在控制台中输出详细的代理日志,帮助调试。logLevel: 'debug', // 添加错误处理回调函数,捕获代理请求中的错误,并返回适当的错误响应onError: (err, req, res) => {console.error('Proxy error:', err);res.status(500).send('Proxy error: ' + err.message);}}},} })
一、 使用 switch 语句和 Vue 的动态类绑定
<template><div :class="['a-bg', titleClass]"></div>
</template><script setup>
import { ref, computed } from "vue";
// 随机赋值
// 定义一个数组,包含可能的值
const possibleValues = ['one', 'two', 'three'];// 生成一个随机索引
const randomIndex = Math.floor(Math.random() * possibleValues.length);// 根据随机索引设置 systemTitle 的值
const systemTitle = ref(possibleValues[randomIndex]);const titleClass = computed(() => {switch (systemTitle.value) {case 'one':return 'one';case 'two':return 'two';default:return 'three';}
});</script><style lang="scss" scoped>
#app {width: 100%;height: 100vh;
}.a-bg {width: 200px;height: 200px;background: linear-gradient(45deg, #fff, red);position: relative;/* 确保伪元素相对于父元素定位 */&::before {content: '';display: block;/* 设置伪元素的显示方式 */position: absolute;/* 确保伪元素绝对定位 */top: 0;left: 0;// src\assets\image\cat1.jpgbackground: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100%;width: 200px;height: 200px;}
}.one::before {background: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100%;
}.two::before {// 绝对路径 从项目的根目录开始计算background: url("/src/assets/image/cat2.jpg") no-repeat center;background-size: 100% 100%;
}.three::before {// 别名路径 用了 @ 别名,指向 src 目录下的路径background: url("@/assets/image/cat3.jpg") no-repeat center;background-size: 100% 100%;
}
</style>
二、使用classList.add()和ref实例
<template><div ref="titleImage" class='a-bg'></div>
</template><script setup>
import { ref, watch, onMounted } from "vue";// 随机赋值
const possibleValues = ['one', 'two', 'three'];
const randomIndex = Math.floor(Math.random() * possibleValues.length);
const systemTitle = ref(possibleValues[randomIndex]);const titleImage = ref(null);const updateTitleImageClass = () => {if (titleImage.value) {console.log('Before:', titleImage.value.className); // 打印当前类名titleImage.value.className = 'a-bg ' + systemTitle.value; // 直接设置类名// titleImage.value.classList.add(`${systemTitle.value}`);console.log('After:', titleImage.value.className); // 打印替换后的类名}
};onMounted(() => {console.log(systemTitle.value, 'systemTitle');updateTitleImageClass();
});// 监听 systemTitle 的变化
watch(systemTitle, updateTitleImageClass);
</script><style lang="scss" scoped>
#app {width: 100%;height: 100vh;
}.a-bg {width: 200px;height: 200px;background: linear-gradient(45deg, #fff, red);position: relative;&::before {content: '';display: block;position: absolute;top: 0;left: 0;background: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100%;width: 200px;height: 200px;}
}.one::before {background: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100% !important;
}.two::before {background: url("/src/assets/image/cat2.jpg") no-repeat center;background-size: 100% 100% !important;
}.three::before {background: url("@/assets/image/cat3.jpg") no-repeat center;background-size: 100% 100% !important;
}
</style>
三、对象映射(类名和图片)
<template><div ref="titleImage" :class="['a-bg', systemTitle.value]"></div>
</template><script setup>
import { ref, watch, onMounted } from "vue";// 随机赋值
const possibleValues = ['one', 'two', 'three'];
const randomIndex = Math.floor(Math.random() * possibleValues.length);
const systemTitle = ref(possibleValues[randomIndex]);const titleImage = ref(null);// 对象映射
const classMapping = {one: 'cat1',two: 'cat2',three: 'cat3'
};const updateTitleImageClass = () => {if (titleImage.value) {console.log('Before:', titleImage.value.className); // 打印当前类名// 清除所有可能的类名for (const key in classMapping) {titleImage.value.classList.remove(key);}// 添加新的类名titleImage.value.classList.add(systemTitle.value);console.log('After:', titleImage.value.className); // 打印替换后的类名}
};onMounted(() => {console.log(systemTitle.value, 'systemTitle');updateTitleImageClass();
});// 监听 systemTitle 的变化
watch(systemTitle, updateTitleImageClass);
</script><style lang="scss" scoped>
#app {width: 100%;height: 100vh;
}.a-bg {width: 200px;height: 200px;background: linear-gradient(45deg, #fff, red);position: relative;&::before {content: '';display: block;position: absolute;top: 0;left: 0;background: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100%;width: 200px;height: 200px;}
}.one::before {background: url("/src/assets/image/cat1.jpg") no-repeat center;background-size: 100% 100% !important;
}.two::before {background: url("/src/assets/image/cat2.jpg") no-repeat center;background-size: 100% 100% !important;
}.three::before {background: url("@/assets/image/cat3.jpg") no-repeat center;background-size: 100% 100% !important;
}
</style>
四、import.meta.glob
<template><div ref="titleImage" :class="['a-bg', systemTitle.value]"></div>
</template><script setup>
import { ref, watch, onMounted } from "vue";// 随机赋值
const possibleValues = ['one', 'two', 'three'];
const randomIndex = Math.floor(Math.random() * possibleValues.length);
const systemTitle = ref(possibleValues[randomIndex]);const titleImage = ref(null);// 动态导入图片
const images = import.meta.glob('@/assets/image/*.jpg');// 对象映射
const classMapping = {one: 'cat1',two: 'cat2',three: 'cat3'
};const updateTitleImageClass = async () => {if (titleImage.value) {console.log('Before:', titleImage.value.className); // 打印当前类名// 清除所有可能的类名for (const key in classMapping) {titleImage.value.classList.remove(key);}// 添加新的类名titleImage.value.classList.add(systemTitle.value);console.log('After:', titleImage.value.className); // 打印替换后的类名// 动态加载图片const imagePath = `/src/assets/image/${classMapping[systemTitle.value]}.jpg`; // 根据系统标题获取图片路径const imageModule = await images[imagePath](); // 使用动态导入const imageUrl = imageModule.default; // 获取图片路径titleImage.value.style.backgroundImage = `url(${imageUrl})`; // 设置背景图片}
};onMounted(() => {console.log(systemTitle.value, 'systemTitle');updateTitleImageClass();
});// 监听 systemTitle 的变化
watch(systemTitle, updateTitleImageClass);
</script><style lang="scss" scoped>
#app {width: 100%;height: 100vh;
}.a-bg {width: 200px;height: 200px;background: linear-gradient(45deg, #fff, red);position: relative;background-size: 100% 100%;
}.one::before,
.two::before,
.three::before {content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
</style>
相关文章:
动态计算加载图片
学习啦 别名路径:①npm install path --save-dev②配置 // vite.config,js import { defineConfig } from vite import vue from vitejs/plugin-vueimport { viteStaticCopy } from vite-plugin-static-copy import path from path export default defineConfig({re…...
利用R包QstFstComp包进行Qst-Fst分析
1.Qst-Fst分析 安装和加载QstFstComp包 首先,你需要安装devtools包,如果尚未安装,可以使用以下命令安装: install.packages("devtools") 2. 然后,使用devtools安装QstFstComp包:R library(de…...
ASP.NET Core8.0学习笔记(二十五)——EF Core Include导航数据加载之预加载与过滤
一、导航属性数据加载 1.在EF Core中可以使用导航属性来加载相关实体。 2.加载实体的三种方式: (1)预先加载:直接在查询主体时就把对应的依赖实体查出来(作为初始查询的一部分) (2)显式加载:使用代码指示稍后显式的从…...
ubuntu常用的设置
目录 1.设置vim的tab键为4个空格2.设置git提交时自动将Tab转换为空格 1.设置vim的tab键为4个空格 set tabstop4 set shiftwidth4 set expandtab tabstop设置Tab键为4个字符宽,shiftwidth设置自动缩进时的宽度也为4,expandtab表示将Tab转换为等量的空格。…...
基于框架的逻辑回归:原理、实现与应用
目录 编辑 逻辑回归原理 损失函数与优化 正则化 基于框架的实现 1. 数据预处理 2. 模型初始化与训练 3. 模型评估与调优 4. 特征缩放 逻辑回归的应用 信用评分 医疗诊断 垃圾邮件识别 推荐系统 结论 在机器学习领域,逻辑回归是一种基础且强大的分类…...
Charts 教程:创建交互式图表的基础
ECharts 是一个开源的、基于 JavaScript 的数据可视化库,它可以帮助你快速创建交互式的图表。无论是简单的柱状图、折线图,还是复杂的地图和关系图,ECharts 都能够轻松应对。本文将带你了解如何在你的网页中使用 ECharts 创建图表,…...
VTK知识学习(20)- 数据的存储与表达
1、数据的存储 1)、vtkDataArray VTK中的内存分配采用连续内存,可以快速地创建、删除和遍历,称之为数据数组(DataArray),用类 vtkDataArray 实现。数组数据的访问是基于索引的,从零开始计数。 以 vtkFloatArray 类来说明如何在 …...
springboot网站开发-使用redis作为定时器控制手机号每日注册次数
springboot网站开发-使用redis作为定时器控制手机号每日注册次数!为了避免,某些手机号,频繁的申请注册,开启了redis数据库配置的定时器模式。下面是设计代码的案例展示。 1: package com.blog.utils;import org.slf4…...
IntelliJ+SpringBoot项目实战(28)--整合Beetl模板框架
在前面的文章里介绍过freemarker,thymeleaf模板引擎,本文介绍另一个性能超高的模板引擎---Beetl,据说此模板引擎的性能远超Freemarker。官网的说法是,Beetl 远超过主流java模板引擎性能(引擎性能5-6倍于FreeMarker,2倍…...
Kafka-Connect源码分析
一、上下文 《Kafka-Connect自带示例》中我们尝试了零配置启动producer和consumer去生产和消费数据,那么它内部是如何实现的呢?下面我们从源码来揭开它神秘的面纱。 二、入口类有哪些? 从启动脚本(connect-standalone.sh&#…...
项目五 李白个人生平(资源)
本项目旨在能够灵活运用整章知识点设计页面。本项目创建了“唐朝诗人群像”网站的第三个页面——即李白个人生平页面,主要完成其 HTML部分。 【项目目的】 灵活运用HTML 基本标记。掌握在 HTML页面中嵌入多媒体对象的方法。【项目内容】 利用HTML标记对网页进行结…...
计算机视觉与各个学科融合:探索新方向
目录 引言计算机视觉与其他学科的结合 与医学的结合与机械工程的结合与土木工程的结合与艺术与人文的结合发文的好处博雅知航的辅导服务 引言 计算机视觉作为人工智能领域的重要分支,正迅速发展并渗透到多个学科。通过与其他领域的结合,计算机视觉不仅…...
数据分析类论文通过stata进行数据预处理(一)
一:导入数据 打开Stata命令窗口,输入以下命令: use "文件路径\数据文件名.dta", clear其中,.dta是Stata的数据文件格式。clear选项用于在打开新数据文件前关闭当前数据集。 以下是一些导入不同格式数据的方法&#x…...
力扣——1.返回字符串中第一个唯一的字符;2.把字符串转换成整数(C++)
1.返回字符串中第一个唯一的字符 1.1题目描述 给定一个字符串s ,找到它的第一个不重复的字符,并返回它的索引 。如果不存在,则返回 -1 。 示例: 1.2思路 这里提供两种思路:第一种是利用哈希表,先遍历一…...
M-LAG【根桥方式】
1.M-LAG不是有单向隔离机制天然防环吗,为什么还要使用STP? 答:因为M-LAG设备下面不是只接服务器,也不是和所有下联设备组成M-LAG,和没有组成M-LAG的设备可能会造成环路。 2.为什么要关闭peer-link接口的生成树计算&a…...
新书速览|循序渐进Node.js企业级开发实践
《循序渐进Node.js企业级开发实践》 1 本书内容 《循序渐进Node.js企业级开发实践》结合作者多年一线开发实践,系统地介绍了Node.js技术栈及其在企业级开发中的应用。全书共分5部分,第1部分基础知识(第1~3章)…...
Xlsxwriter生成Excel文件时TypeError异常处理
在使用 XlsxWriter 生成 Excel 文件时,如果遇到 TypeError,通常是因为尝试写入的值或格式与 XlsxWriter 的限制或要求不兼容。 1、问题背景 在使用 Xlsxwriter 库生成 Excel 文件时,出现 TypeError: “expected string or buffer” 异常。此…...
【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处?
【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处? 重要性:★★★ 💯 NLP Github 项目: NLP 项目实践:fasterai/nlp-project-practice 介绍:该仓库围绕着 NLP 任务模型的设计、训练、优化…...
2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析
2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析 完整代码请私聊 博主 # 一、背景 肥料是农业生产中一种重要的生产资料,其生产销售必须遵循《肥料登记管理办法》,依法在农业行政管理部门进行登记。各省、自治区、直辖市人民政府农业行政主管部门主…...
网络原理之 IP 协议
目录 1. IP 协议报文格式 2. 网段划分 3. 地址管理 1) 动态分配 2) NAT 机制 (网络地址转换) 3) IPv6 4. 路由选择 1. IP 协议报文格式 IP 协议是网络层的重点协议。 网络层要做的事情,主要就是两方面: 1) 地址管理 制定一系列的规则ÿ…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
