当前位置: 首页 > 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;
}
http://www.lryc.cn/news/291844.html

相关文章:

  • k8s从私有库harbor中拉取镜像
  • HCIA-Datacom实验指导手册:4.2 实验二:AAA配置实验
  • 黑马程序员前端web入门:新浪新闻
  • 力扣_字符串2—最长有效括号
  • 小程序接入企业微信「联系我」功能
  • jdk17新特性—— 密封类(Sealed Classes)
  • 【亿级数据专题】「分布式消息引擎」 盘点本年度我们探索服务的HA高可用解决方案
  • 计算机网络-物理层设备(中继器 集线器)
  • PaddleDetection学习4——使用Paddle-Lite和OpencCV在 Android 上实现实时的人脸检测(java)
  • mkcert的安装和使用,5分学会在本地开启localhost的https访问方式
  • RHCE DNS域名解析服务器
  • 创建表与删除表(六)
  • 微信开发者工具 git 拉取 failed invalid authentication scheme
  • (4)Elastix图像配准:3D图像
  • windows安装oracle之后怎么连接使用
  • 在前端开发中,常见的数组循环方式有以下几种:
  • Redis -- 单线程模型
  • C语言第十五弹---操作符(上)
  • 使用宝塔面板访问MySQL数据库
  • Win10 双网卡实现同时上内外网
  • Django模型(六)
  • 【Linux】Linux基本指令
  • stm32中的SPI
  • ChatGPT可与自定义GPTs一起使用,智能AI代理时代来啦!
  • 《Numpy 简易速速上手小册》第1章:Numpy 基础(2024 最新版)
  • 【美团】SaaS技术部-后端研发工程师(海外业务)
  • linux安装mongodb数据库启动报错? 都是冰红茶滴水儿
  • win11安装wsl作为linux子系统并当作服务器
  • 户用光伏电站的管理包括哪些内容?需要怎么做?
  • Kafka-服务端-PartitionLeaderSelector、ReplicaStateMachine