当前位置: 首页 > news >正文

vue3动态循环引入本地静态图片资源

解决方法一
根据官网的提示,我找到了最简单的方法,就是在将asset 前面加上src。

解决方法二
关于第二个方法,官网说:“实际上,Vite 并不需要在开发阶段处理这些代码!在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”

动+静

<img :src="`/src/assets/images/survey/${v.code}.png`" >

图片文件位置
在这里插入图片描述

纯静(轮播图)

<el-carousel type="card" height="133px" arrow="never" :autoplay="false"><el-carousel-item v-for="item in bannerInfo" :key="item"><img :src="item" style="width: 100%;border-radius: 5px"/></el-carousel-item>
</el-carousel>
const bannerInfo = ref([new URL('@/assets/images/safeguard_banner.png', import.meta.url).href,new URL('@/assets/images/safeguard_banner2.png', import.meta.url).href,new URL('@/assets/images/safeguard_banner3.png', import.meta.url).href,
])
<img :src="" alt="getImageUrl(name)" />function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
}

相关文章:

vue3动态循环引入本地静态图片资源

解决方法一 根据官网的提示&#xff0c;我找到了最简单的方法&#xff0c;就是在将asset 前面加上src。 解决方法二 关于第二个方法&#xff0c;官网说&#xff1a;“实际上&#xff0c;Vite 并不需要在开发阶段处理这些代码&#xff01;在生产构建时&#xff0c;Vite 才会进行…...

k8s从私有库harbor中拉取镜像

目录 一、前言 二、配置 三、问题总结 一、前言 Docker镜像是构建应用程序的基础。然而&#xff0c;许多组织和开发团队希望保留他们的Docker镜像在私有仓库中&#xff0c;并从中拉取镜像&#xff0c;而不是从公共Docker Hub中下载。这样做的原因有很多&#xff0c;包括&…...

HCIA-Datacom实验指导手册:4.2 实验二:AAA配置实验

HCIA-Datacom实验指导手册&#xff1a;3.3 实验三&#xff1a;以太网链路聚合实验 一、实验介绍&#xff1a;display ssh server ip-block all通过Telnet登录时&#xff0c;解除对IP地址10.1.2.3的锁定。通过STelnet登录时&#xff0c;解除对IP地址10.1.2.3的锁定。解除对用户名…...

黑马程序员前端web入门:新浪新闻

黑马程序员前端web入门&#xff1a;新浪新闻 几点学习到的&#xff1a; 设置li无圆点: list-style: none;设置a无下划线&#xff1a;text-decoration: none;a属于行内元素&#xff0c;高度hegiht不起作用&#xff0c;可以设置 display: block; 把它变成块元素。此时&#xff0c…...

力扣_字符串2—最长有效括号

题目 给你一个只包含 ‘(’ 和 ‘)’ 的字符串 s s s&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 方法 动态规划 d p [ i ] dp[i] dp[i] 表示以 s [ i ] s[i] s[i] 结尾的最长有效括号的长度如果 s [ i ] s[i] s[i] 为左括号&#…...

小程序接入企业微信「联系我」功能

接入模式有两种 1&#xff0c;展示二维码 可以直接调用服务端API的 配置客户联系「联系我」方式 得到二维码地址给到前端直接展示 2&#xff0c;展示类似“联系客服”的按钮&#xff08;文字和样式可以使用企业微信提供的几种&#xff09; a&#xff09;在小程序后台 “设置…...

jdk17新特性—— 密封类(Sealed Classes)

目录 一、密封类(Sealed Classes)的概述1.1、概述1.2、特性1.3、注意事项 二、密封类(Sealed Classes)代码示例2.1、密封类(Sealed Classes)代码结构示例2.2、密封类(Sealed Classes)代码示例 三、密封类(Sealed Classes)接口代码示例3.1、密封类(Sealed Classes)接口代码结构示…...

【亿级数据专题】「分布式消息引擎」 盘点本年度我们探索服务的HA高可用解决方案

盘点本年度我们探索服务的HA高可用解决方案 前言介绍HA高可用高可用性评估可用性是平均故障间隔时间 HA技术架构的特性分析Master/Slave架构主从复制模式主从复制的特性分析 高可用案例RocketMQ的主从架构责任划分同步机制动态化RocketMQ高可用架构中有限状态机的转换 总结Mast…...

计算机网络-物理层设备(中继器 集线器)

文章目录 中继器中继器的功能再生数字信号和再生模拟信号同一个协议 集线器&#xff08;多口中继器&#xff09;不具备定向传输的原因集线器是共享式设备的原因集线器的所有接口都处于同一个碰撞域&#xff08;冲突域&#xff09;内的原因 小结 中继器 中继器的功能 中继器的…...

PaddleDetection学习4——使用Paddle-Lite和OpencCV在 Android 上实现实时的人脸检测(java)

使用Paddle-Lite在 Android 上实现人脸检测 1 环境准备2. 部署步骤2.1 下载PaddleLite-android-demo2.2 运行face_detection_demo项目3 导入OpenCV进行优化3.1 Android Studio配置OpenCV3.2 预处理代码3.3 后处理代码3.4 优化结果1 环境准备 参考前一篇在 Android 上使用Paddl…...

mkcert的安装和使用,5分学会在本地开启localhost的https访问方式

mkcert官方仓库地址&#xff1a;https://github.com/FiloSottile/mkcert#installation mkcert 是一个简单的工具&#xff0c;用于制作本地信任的开发证书。它不需要配置。 简化我们在本地搭建 https 环境的复杂性&#xff0c;无需操作繁杂的 openssl 实现自签证书了&#xff…...

RHCE DNS域名解析服务器

目录 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 1.3 DNS配置 1.4 测试 2. 反向解析 2.1 关闭安全软件&#xff0c;安装必要软件 2.2 配置静态ip 2.3 DNS配置 2.4 测试 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 服务器配置 nmcli c modify ens32 ipv4.method man…...

创建表与删除表(六)

表的基本操作&#xff08;六&#xff09; 一、创建表 1.1 使用DDL语句创建表 CREATE TABLE 表名(列名 类型,列名 类型......); 示例&#xff1a; 创建一个 employees 表包含雇员 ID &#xff0c;雇员名字&#xff0c;雇员薪水。 create table employees(employee_id int,em…...

微信开发者工具 git 拉取 failed invalid authentication scheme

微信开发者工具 git 拉取 failed invalid authentication scheme 拉取代码时报错,无效身份认证 解决方案: 1.检查git地址是否正常 2.检查git用户名密码是否正确...

(4)Elastix图像配准:3D图像

文章目录 前言1、项目实战2、参数文件2.1、parameter_file_rigid_3D.txt2.2、parameter_file_affine_3D.txt2.3、parameter_file_bspline_3D.txt前言 (1)Elastix图像配准:原理 + 源码(详解) (2)Elastix图像配准:参数文件(配准精度的关键) 1、项目实战 将以下文件保…...

windows安装oracle之后怎么连接使用

目录 1.打开SQl Developer 2.选择JDK 3.登录 4.创建表空间,用户 安装oracle的详细教程 WINDOWS安装Oracle11.2.0.4-CSDN博客 1.打开SQl Developer 找到 SQl Developer 2.选择JDK 根据你安装的oracle版本,因为我的oracle是安装的32位的,所以这里jdk也要选择32位 选择到ja…...

在前端开发中,常见的数组循环方式有以下几种:

在前端开发中&#xff0c;常见的数组循环方式有以下几种&#xff1a; for 循环&#xff1a;使用最传统的 for 循环来遍历数组元素。 const array [1, 2, 3, 4, 5];for (let i 0; i < array.length; i) {console.log(array[i]); }forEach() 方法&#xff1a;使用数组的 …...

Redis -- 单线程模型

失败是成功之母 ——法国作家巴尔扎克 目录 单线程模型 Redis为什么这么快 单线程模型 redis只使用一个线程&#xff0c;处理所有的命令请求&#xff0c;不是说redis服务器进场内部真的就只有一个线程&#xff0c;其实也有多个线程&#xff0c;那就是处理网络和io的线程。 R…...

C语言第十五弹---操作符(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 操作符 1、操作符的分类 2、二进制和进制转换 2.1、2进制转10进制 2.1.1、10进制转2进制数字 2.2、2进制转8进制和16进制 2.2.2、2进制转16进制 3. 原码、反…...

使用宝塔面板访问MySQL数据库

文章目录 前言一、安装访问工具二、查看数据库总结 前言 前面我们已经部署了前后端项目&#xff0c;但是却不能得到数据库的信息&#xff0c;看有谁再使用你的项目。例如员工、用户等等。本次博客进行讲解如何在宝塔面板里面访问MySQL数据库。 一、安装访问工具 1、打开软件商…...

终极解决方案:三步彻底卸载Windows系统中顽固的Microsoft Edge浏览器

终极解决方案&#xff1a;三步彻底卸载Windows系统中顽固的Microsoft Edge浏览器 【免费下载链接】EdgeRemover A PowerShell script that correctly uninstalls or reinstalls Microsoft Edge on Windows 10 & 11. 项目地址: https://gitcode.com/gh_mirrors/ed/EdgeRem…...

Arm处理器HPA漏洞CVE-2024-5660解析与防护

1. CVE-2024-5660漏洞深度解析在2024年12月首次披露的CVE-2024-5660漏洞&#xff0c;影响了Arm多款主流处理器架构。这个漏洞的核心在于硬件页聚合(Hardware Page Aggregation, HPA)功能与内存转换机制交互时产生的安全问题。当系统同时启用HPA和Stage-1/Stage-2地址转换时&…...

STM32以太网实战:手把手教你配置SMI接口,搞定PHY寄存器读写

STM32以太网实战&#xff1a;手把手教你配置SMI接口&#xff0c;搞定PHY寄存器读写 在嵌入式以太网开发中&#xff0c;PHY芯片的配置往往是项目成败的关键。很多开发者能够轻松完成MAC层的初始化&#xff0c;却在PHY寄存器读写这个环节卡壳——明明硬件连接正确&#xff0c;却无…...

厂房分区控温需求,水冷空调按需布设灵活调配

在工业生产与商业运营中&#xff0c;高温作业环境长期困扰着企业和劳动者。一方面&#xff0c;传统中央空调的高昂安装与运营成本让大多数中小企业望而却步&#xff1b;另一方面&#xff0c;超大厂房、物流仓库、汽车制造车间等开放或半开放场景&#xff0c;难以实现完全密封&a…...

Java 读写 Excel 公式:从基础到高级的实战总结

做数据处理的朋友应该都遇到过这种场景&#xff1a;需要批量生成带公式的Excel报表&#xff0c;或者读取现有表格中的公式进行二次计算。以前我都是手动在Excel里写公式&#xff0c;后来发现用Java代码来处理更高效&#xff0c;尤其是数据量大的时候。 今天整理一下平时用得比较…...

别再死记硬背寄存器了!用Vivado SDK玩转Zynq 7010的GPIO(附MIO/EMIO/中断完整代码)

实战派Zynq 7010开发&#xff1a;从零玩转GPIO控制与中断处理 刚接触Zynq平台的开发者常被复杂的寄存器配置困扰&#xff0c;其实Xilinx提供的驱动库能大幅简化开发流程。本文将带你用Vivado SDK快速实现GPIO控制&#xff0c;避开底层细节直接产出可运行代码。 1. 环境搭建与基…...

python的pyd本质:就是Windows平台下的DLL动态链接库

一、 拆解&#xff1a;Python 库的真实生态与 .pyd / .so 的底层逻辑1. Python 真的有百万个第三方 PIP 库吗&#xff1f;不准确。 截至2026年&#xff0c;PyPI&#xff08;Python Package Index&#xff09;官方注册的开源项目总量大约在 50万到60万个 之间。虽然达不到“百万…...

HarmonyOS ArkUI实战:从零构建购物社交应用UI界面

1. 项目概述与核心价值如果你正在学习HarmonyOS应用开发&#xff0c;或者已经从其他移动端框架&#xff08;如Android、Flutter&#xff09;转过来&#xff0c;那么构建一个美观、交互流畅的UI界面&#xff0c;往往是上手实践的第一步&#xff0c;也是最直观检验学习成果的一步…...

我用了半年只留下这一个!2026做讲座视频总结的神器我真心安利给大家

作为天天测各种AI工具的内容博主&#xff0c;我一半的工作时间都在处理音视频素材——整理讲座录音、剪知识总结视频、整理访谈素材&#xff0c;前前后后踩了快十个转写工具的坑&#xff0c;今天直接给结论&#xff1a;听脑AI是目前同类工具里最值得内容创作者尝试的方案&#…...

服务器末级缓存优化:指令-数据关联性管理技术

1. 服务器工作负载中的末级缓存挑战在现代多核处理器架构中&#xff0c;共享末级缓存(Shared Last-Level Cache, LLC)的性能优化一直是计算机体系结构研究的核心课题。随着云计算和分布式计算的普及&#xff0c;服务器工作负载呈现出两个显著特征&#xff1a;指令足迹(instruct…...