vue中动态渲染静态图片资源

不报错且f12查看元素的时候,显示的src说明已经渲染到html的src上,但是就是不显示在页面上
原因
在vue上,动态渲染静态图片资源(比如从assets文件夹加载的图片)需要注意打包工具对静态资源的解析方式
由于vue2的脚手架工具是vue-cil,而vue-cil的底层是基于webpack,vue3的脚手架工具是create-vue,create-vue的底层是基于vite,所以两者的底层打包工具不一样,相应的对静态资源的解析方式也不一样
vue2解决办法
方法一
需要require动态加载静态资源
<template><div><div v-for="(item, index) in images" :key="index"><img :src="getImagePath(item)" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'], // 图片文件名};},methods: {getImagePath(image) {// 使用 require 加载图片资源return require(`@/assets/images/${image}`);},},
};
</script>
方法二
使用webpack提供的静态资源路径解析~
<template><div><div v-for="(item, index) in images" :key="index"><img :src="`~@/assets/images/${item}`" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},
};
</script>
vue3解决办法
如果你的项目是通过vite创建的vue3项目的话,应该使用vite提供的静态资源载入方法
requie是webpack提供的一种加载能力,所以vite不能用require方法
方法一
使用new URL(` `, import.meta.url).href
<template><div><div v-for="(item, index) in images" :key="index"><img :src="getImagePath(item)" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},methods: {getImagePath(image) {// 使用 new URL 加载图片资源return new URL(`../assets/images/${image}`, import.meta.url).href;},},
};
</script>
方法二
如果路径是动态拼接的,可以直接在模板中拼接路径
<template><div><div v-for="(item, index) in images" :key="index"><img :src="`/src/assets/images/${item}`" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},
};
</script>
相关文章:
vue中动态渲染静态图片资源
不报错且f12查看元素的时候,显示的src说明已经渲染到html的src上,但是就是不显示在页面上 原因 在vue上,动态渲染静态图片资源(比如从assets文件夹加载的图片)需要注意打包工具对静态资源的解析方式 由于vue2的脚手…...
管伊佳ERP,原名华夏ERP,一个简约易上手的国产ERP系统
JSH_ERP(管伊佳ERP)是一款开源、模块化的企业资源计划系统,旨在为中小企业提供高效的管理工具。它基于SpringBoot框架和SaaS模式,支持进销存、财务、生产等业务模块,包括零售、采购、销售、仓库和报表管理。 核心特点…...
学习虚幻C++开发日志——委托(持续更新中)
委托 官方文档:Delegates and Lamba Functions in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 简单地说,委托就像是一个“函数指针”,但它更加安全和灵活。它允许程序在运行时动态地调用不…...
开窗函数 - first_value/last_value
1、开窗函数是什么? 开窗函数用于为行定义一个窗口(这里的窗口是指运算将要操作的行的集合),它对一组值进行操作,不需要使用 GROUP BY 子句对数据进行分组,能够在同一行中同时返回基础行的列和聚合列。 2、…...
「一」HarmonyOS端云一体化概要
关于作者 白晓明 宁夏图尔科技有限公司董事长兼CEO、坚果派联合创始人 华为HDE、润和软件HiHope社区专家、鸿蒙KOL、仓颉KOL 华为开发者学堂/51CTO学堂/CSDN学堂认证讲师 开放原子开源基金会2023开源贡献之星 「目录」 「一」HarmonyOS端云一体化概要 「二」体验HarmonyOS端云一…...
nodejs21: 快速构建自定义设计样式Tailwind CSS
Tailwind CSS 是一个功能强大的低级 CSS 框架,只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。 1. 安装 Tailwind CSS React 项目中安装 Tailwind CSS: 1.1 安装 Tailwind CSS 和相关依赖 安装 Tailwind CSS: npm…...
从JSON数据提取嵌套字段并转换为独立列的简洁方法
从JSON数据提取嵌套字段并转换为独立列的简洁方法 在数据处理和数据分析的日常工作中,我们经常遇到复杂的嵌套数据结构,特别是嵌入在JSON字段中的数据。这些数据往往需要解析并展开成独立的列,以便后续分析和建模。本文将详细介绍如何在Pyth…...
湘潭大学软件工程算法设计与分析考试复习笔记(四)
回顾 湘潭大学软件工程算法设计与分析考试复习笔记(一)湘潭大学软件工程算法设计与分析考试复习笔记(二)湘潭大学软件工程算法设计与分析考试复习笔记(三) 前言 现在是晚上十一点,我平时是十…...
特征交叉-DeepCross Network学习
一 tensorflow官方实现 tensorflow的官方实现已经是V2版本 class Cross(tf.keras.layers.Layer):"""Cross Layer in Deep & Cross Network to learn explicit feature interactions.Args:projection_dim: int,低秩矩阵的维度,应该小…...
stm32cubemx+VSCODE+GCC+makefile 开发环境搭建
title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…...
Go语言中的Defer机制详解与示例
在Go语言中,defer是一个关键字,用于确保资源的清理和释放,特别是在函数中创建的资源。defer语句会将其后的函数调用推迟到包含它的函数即将返回时执行。这使得defer成为处理文件关闭、数据库连接释放、解锁等资源清理操作的理想选择。 Defer…...
H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解
随着技术的不断进步和5G网络的推广,中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长,并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁,推动数字媒体产业的创新和发展。 EasyPla…...
ms-hot目录
1. ms-hot1...
vulfocus在线靶场:骑士cms_cve_2020_35339:latest 速通手册
目录 一、启动环境,访问页面,ip:端口号/index.php?madmin,进入后台管理页面,账号密码都是adminadmin 二、进入之后,根据图片所示,地址后追加一下代码,保存修改 三、新开标签页访问:①ip:端…...
AI Large Language Model
AI 的 Large Language model LLM , 大语言模型: 是AI的模型,专门设计用来处理自然语言相关任务。它们通过深度学习和庞大的训练数据集,在理解和生成自然语言文本方面表现出色。常见的 LLM 包括 OpenAI 的 GPT 系列、Google 的 PaLM 和 Meta…...
React Native的`react-native-reanimated`库中的`useAnimatedStyle`钩子来创建一个动画样式
React Native的react-native-reanimated库中的useAnimatedStyle钩子来创建一个动画样式,用于一个滑动视图的每个项目(SliderItem)。useAnimatedStyle钩子允许你根据动画值(在这个例子中是scrollX)来动态地设置组件的样…...
FastJson反序列化漏洞(CVE-2017-18349)
漏洞原理 原理就不多说了,可以去看我这篇文章,已经写得很详细了。 Java安全—log4j日志&FastJson序列化&JNDI注入-CSDN博客 影响版本 FastJson<1.2.24 复现过程 这里我是用vulfocus.cn这个漏洞平台去复现的,比较方便&#x…...
【优选算法篇】分治乾坤,万物归一:在重组中窥见无声的秩序
文章目录 分治专题(二):归并排序的核心思想与进阶应用前言、第二章:归并排序的应用与延展2.1 归并排序(medium)解法(归并排序)C 代码实现易错点提示时间复杂度和空间复杂度 2.2 数组…...
C++:探索AVL树旋转的奥秘
文章目录 前言 AVL树为什么要旋转?一、插入一个值的大概过程1. 插入一个值的大致过程2. 平衡因子更新原则3. 旋转处理的目的 二、左单旋1. 左单旋旋转方式总处理图2. 左单旋具体会遇到的情况3. 左单旋代码总结 三、右单旋1. 右单旋旋转方式总处理图2. 右单旋具体会遇…...
2. Django中的URL调度器 (自定义路径转换器)
在 Django 中,URL 路由通常使用路径转换器(path converters)来匹配和捕获 URL 中的特定模式,例如整数、字符串或 slug 等。默认情况下,Django 提供了一些内置的路径转换器,如 <int>、<str>、&l…...
【信息科学与工程学】【人工智能】【知识工程】企业知识库管理与评估-第四篇-市场篇
一、企业价格知识管理参数体系 1.1、价格知识管理参数列表 内部交易价格参数 参数名称 参数定义 计算公式 计量单位 数据来源 部门间转移定价准确率 内部转移定价的准确程度 准确转移定价次数 / 总转移定价次数 100% % 财务系统、转移定价记录 成本中心计价合规率…...
SignalTap调试进阶:巧用约束与别名捕获FPGA优化后的关键信号
1. 为什么优化后的信号会"消失"? 很多FPGA工程师都遇到过这样的场景:明明在代码里明确定义了reg和wire信号,但在SignalTap里死活找不到它们的身影。这其实不是工具出了问题,而是Quartus的综合优化在"作怪"。…...
ZYNQ PL端纯Verilog逻辑固化踩坑记:为什么我的bit文件烧不进Flash?
ZYNQ PL端逻辑固化深度解析:从硬件启动原理到避坑实践 第一次尝试在ZYNQ上固化纯PL端逻辑时,很多工程师都会遇到一个令人困惑的现象——明明在普通FPGA上能轻松实现的bit文件烧录,到了ZYNQ平台却屡屡失败。这背后隐藏着ZYNQ芯片独特的启动机制…...
PARD-SSM:基于概率状态空间模型的多阶段网络攻击检测
1. 项目概述在网络安全领域,传统的入侵检测系统(IDS)面临着多阶段攻击检测的严峻挑战。攻击者通常会按照"攻击链"(Kill Chain)的步骤逐步渗透系统,从最初的侦察阶段到最终的数据窃取,每个阶段的网络流量特征可能单独看起来都像是正…...
DevOps与MCP协议:构建AI增强型智能运维工作台
1. 项目概述:DevOps与MCP的交汇点最近在GitHub上看到一个挺有意思的项目,叫rohitg00/awesome-devops-mcp-servers。如果你是做DevOps或者对AI辅助编程感兴趣,这个仓库绝对值得你花时间研究。简单来说,这是一个精心整理的列表&…...
iOS激活锁终极绕过指南:开源工具applera1n的完整解决方案
iOS激活锁终极绕过指南:开源工具applera1n的完整解决方案 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n 面对iOS设备激活锁的困扰,你是否曾为无法使用二手iPhone而烦恼&#x…...
避震不是“越硬越好”:拆解阻尼、弹簧与预载的黄金三角法则
在改装领域,“避震越硬操控越好”几乎成了一条默认的“铁律”。不少玩家升级绞牙避震后,第一反应就是将阻尼旋钮拧至紧,以“颠”为荣,仿佛不如此便无法体现硬核姿态。但Cornerspeed必须指出一个被长期忽视的工程事实:刚…...
云计算Linux——nginx httpd后端 配置 反向代理(十二)
一、反向代理核心原理与作用补充: 正向代理: VPN 反向代理: 访问网站(动态任务)1.什么是反向代理?反向代理是服务器端的代理。客户端访问反向代理服务器,由代理服务器将请求转发给后 端真实服务器…...
ClawX:OpenClaw AI智能体桌面门户,图形化编排与自动化实战
1. 项目概述:ClawX,为OpenClaw AI智能体打造的桌面门户如果你和我一样,对AI智能体(AI Agent)的潜力感到兴奋,却又对在终端里敲打复杂的命令行、配置繁琐的YAML文件感到头疼,那么ClawX的出现&…...
Pandas数据合并:concat vs append,选哪个?用真实‘幸福指数’数据集测给你看
Pandas数据合并实战:concat与append深度性能对比 在数据分析工作中,数据合并是最基础也最频繁的操作之一。Pandas提供了多种合并数据的方法,其中concat和append是最常用的两种纵向合并方式。但很多开发者并不清楚它们在实际项目中的性能差异和…...
