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

news2024/12/24 9:16:35

解决方法一
根据官网的提示,我找到了最简单的方法,就是在将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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1424948.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git命令窗口:创建一个.bashrc文件,别名实现git log (代替冗余的指令)查询提交修改日志功能

在我们的用户下创建一个.bashrc文件&#xff0c;然后添加如下代码。即可实现我们命令窗口由于每次想要看到好的效果而输入几条指令的问题。 这里我们就只需要使用 git-log 代替我们的git log。这样在命令窗口看到的效果就清晰明了。

在Android Studio中配置OpenCV

在Android Studio中配置OpenCV 1 下载OpenCV2 导入OpenCV模块3 修改配置4 增加依赖5 拷贝libopencv_java.so6 Activity中加入代码1 下载OpenCV 下载OpenCV的Android包并解压。 2 导入OpenCV模块 在Android应用中,导入OpenCV模块。 导入目录时选择Opencv Android中的sdk目…

铁轨语义分割(Unet结合resnet系列)

数据介绍 一类是图片&#xff0c;一类是图像标签。 引入库&#xff0c;处理数据 import torch.nn as nn import torch import torch.nn.functional as F import os from PIL import Image import torch from torch.utils.data import Dataset import torchvision.transfor…

分布式事务(二)—— CAP和Base理论

系列目录&#xff1a; 《分布式事务&#xff08;一&#xff09;—— 事务的基本概念》 一、CAP理论 cap理论是分布式系统的理论基石 1、Consistency[一致性] 即操作成功并返回客户端后&#xff0c;所有节点在同一时间的数据完全一致&#xff0c;这就是分布式的一致性。一致…

分享个前端工具-取色调色工具

这里虽然贴了两个&#xff0c;但推荐 Pipette. PipetteWin22.10.22.zip: https://download.csdn.net/download/rainyspring4540/88799632 图标&#xff1a; 界面&#xff1a; ColorPix https://download.csdn.net/download/rainyspring4540/88799642 图标&#xff1a; 界面…

在Windows11的WSL上运行Llama2-7b-chat 后记

往期的Llama2-7b-chat中我们试用了官方的demo&#xff0c;但是那个demo只能在代码中传入固定的对话&#xff0c;我稍微修改了一下&#xff0c;使其能在命令行中不间断对话&#xff08;不具备记忆功能&#xff09; 代码 import os import torch os.environ[PL_TORCH_DISTRIBUT…

基于 LLM+LlamaIndex+NebulaGraph,构建大模型知识图谱的检索(RAG)方法

最近&#xff0c;围绕着利用 LLM&#xff08;Language Model&#xff09;和知识图谱&#xff08;KG&#xff0c;Knowledge Graphs&#xff09;构建RAG&#xff08;Retrieval Augmented Generation&#xff09;流程引起了很多关注。 在本文中&#xff0c;让我们通过利用 LlamaI…

Linux部署DataEase数据分析工具并结合内网穿透实现任意设备远程查看数据

文章目录 前言1. 安装DataEase2. 本地访问测试3. 安装 cpolar内网穿透软件4. 配置DataEase公网访问地址5. 公网远程访问Data Ease6. 固定Data Ease公网地址 前言 DataEase 是开源的数据可视化分析工具&#xff0c;帮助用户快速分析数据并洞察业务趋势&#xff0c;从而实现业务…

DolphinScheduler管理数仓任务规范

目录 一、DolphinScheduler调度数仓任务现状分析 2.1 一个任务流构建数仓所有的逻辑节点 2.2 每个逻辑节点构建一个任务流 二、数仓任务管理调度需求分析 三、DolphinScheduler数仓开发任务管理规范 四、结语 前言&#xff1a;大数据领域对多种任务都有调度需求&#xff…

modbus协议和示例

协议 主机读写 从站地址&#xff08;8bit&#xff09;功能码 &#xff08;8bit&#xff09;起始地址&#xff08;16bit&#xff09;数量&#xff08;16bit&#xff09;CRC&#xff08;16bit&#xff09; 从机对主机读取的回复 从站地址&#xff08;8bit&#xff09;功能码 …

并网逆变器学习笔记8---平衡桥(独立中线模块)控制

参考文献&#xff1a;《带独立中线模块的三相四线制逆变器中线电压脉动抑制方法》---赵文心 一、独立中线模块的三相四线拓扑 独立中线模块是控制中线电压恒为母线一半&#xff0c;同时为零序电流ineu提供通路。不平衡负载的零序电流会导致中线电压脉动&#xff0c;因此需要控制…

Python第十三章(递归与lamada)

一。引用类型 不可变类型&#xff1a;在改变原有类型的数据后&#xff0c;值的地址也会进行更改 包括&#xff1a;整数&#xff0c;浮点数&#xff0c;字符串&#xff0c;元组 用id()&#xff1a;进行判断是否十进制地址是否一样 可变类型&#xff1a;在改变原有类型后&…

一文教你如何本地搭建Qchan图床网站实现公网远程访问

文章目录 前言1. Qchan网站搭建1.1 Qchan下载和安装1.2 Qchan网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar云端设置2.2 Cpolar本地设置 3. 公网访问测试总结 前言 图床作为云存储的一项重要应用场景&#xff0c;在大量开发人员的努力下&#xff0c;已经开发出大…

endnote设置引用格式

1在这上面找到合适的style&#xff0c;比如搜索nature methods https://endnote.com/downloads/styles/​​​​​​2.下载到的ens用endnote打开&#xff0c;可以导入nature methods格式 3.引用的时候发现显示的插入是4-7&#xff0c;但是看了最近nature methods的是4,5,6,7 …

C/C++实现无序入参的命令解析工具

C/C实现无序入参的命令解析工具 1 实现思路2 主要功能3 效果展示3.1 直接运行代码图3.2help命令执行效果图3.3命令行执行命令解析效果图 4 代码实现5 代码下载 1 实现思路 基本介绍&#xff1a; 思路来源于atlas,atc(模型转换工具)&#xff0c;该工具对命令支持众多&#xff0…

多智能体强化学习--MAPPO(pytorch代码详解)

标题 代码详解Actor和Critic网络的设置 代码详解 代码链接&#xff08;点击跳转&#xff09; Actor和Critic网络的设置 基本设置&#xff1a;3个智能体、每个智能体观测空间18维。Actor网络&#xff1a;实例化一个actor对象&#xff0c;input-size是18Critic网络&#xff1…

Shell脚本——免交互

目录 一、Here Document免交互 1、免交互概述 2、语法格式 2.1示例&#xff1a;免交互方式实现对行数的统计&#xff0c;将要统计的内容置于标记EOF之间&#xff0c;直接将内容传给wc-l来统计 3、变量设定 ①变量图换成实际值 ②整行内容作为变量并输出结果 ③使输出内…

杠杆交易在伦敦金市场的优势与风险

伦敦金作为黄金市场的灯塔&#xff0c;每天吸引着全球投资者的目光。伦敦金的特殊地位使得以它为基准的杠杆交易成为众多投资者追逐的目标。在这篇文章中&#xff0c;我们将深入探讨伦敦金杠杆交易的奥秘&#xff0c;带你揭开这一盛宴的神秘面纱。 伦敦金杠杆交易的核心在于通过…

【pytorch】anaconda使用及安装pytorch

https://zhuanlan.zhihu.com/p/348120084 https://blog.csdn.net/weixin_44110563/article/details/123324304 介绍 Conda创建环境相当于创建一个虚拟的空间将这些包都装在这个位置&#xff0c;不需要了可以直接打包放入垃圾箱&#xff0c;同时也可以针对不同程序的运行环境选…

HashSet 的基本操作【集合容器知识回顾 ④】

HashSet 是 Java 中的一个集合类&#xff0c;它实现了 Set 接口。Set 是一种不允许包含重复元素的集合&#xff0c;而 HashSet 则是 Set 接口的一个具体实现。因此&#xff0c;HashSet 用于存储一组唯一的元素&#xff0c;不允许重复。 HashSet 的一些特点&#xff1a; 不允许…