vue中动态引入图片为什么要是require， 你不知道的那些事

已于 2023-10-17 17:04:53 修改
阅读量8.2k 收藏 78
点赞数 35
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
于 2022-11-01 20:22:19 首次发布
已获得YOLO官方许可认证，源码版权：斌擎人工智能
本文链接：https://blog.csdn.net/m0_68036862/article/details/127640668
本文探讨了在Vue中动态引入图片时为何需要使用require，解释了静态资源和动态资源的区别，分析了require的作用和Webpack的打包过程。通过实例展示了动态添加src时的编译问题，说明了public目录下资源的处理方式，以及Webpack中资源引入的base64和打包到dist目录的策略，旨在澄清相关概念和工作原理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require

有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require， 我倒着都能背出来......

emmm... 乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥？针对上面的回答，我不禁有如下几个疑问：

  1. 什么是静态资源？
  2. 为什么动态添加的src会被当做的静态的资源？
  3. 没有进行编译，是指为是什么没有被编译？
  4. 加上require为什么能正确的引入资源，是因为加上require就能编译了？

当我产生最后一个疑问的时候，发现上面的答案看似说了些啥，但好像又什么都没说...... 如果各位看官老爷也有如上几个疑问，那就让我给大家一一解惑

1.什么是静态资源

与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。

静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。

动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之

了解本专栏 订阅专栏 解锁全文
博客
YOLO项目环境配置教程
10-16 4631
YOLO项目环境安装，环境配置，项目环境配置，python虚拟环境搭建
博客
基于深度学习YOLOv12的密集行人识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 435
本文设计并实现了一种基于YOLOv12深度学习模型的密集行人识别检测系统，结合YOLO数据集与用户友好的UI界面，构建了一套完整的行人检测解决方案。系统采用Python开发，包含登录注册功能，并基于YOLOv12算法优化了密集场景下的检测精度与速度。实验数据包含训练集（7200张图像）和验证集（1800张图像）。
博客
基于深度学习YOLOv11的密集行人识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 487
本文基于YOLOv11深度学习算法，设计并实现了一套密集行人识别检测系统。该系统采用YOLO数据集进行训练与验证，其中训练集包含7200张图像，验证集包含1800张图像，目标类别为行人（person）。系统整合了用户友好的UI界面，支持登录注册功能，提升了交互体验。通过优化YOLOv11模型在密集场景下的检测性能，系统能够高效、准确地识别复杂环境中的行人目标。实验结果表明，该系统在准确率和实时性上均表现优异，适用于安防监控、人流统计等实际应用场景。本文提供了完整的Python项目源码、预训练模型及详细实现方
博客
基于深度学习YOLOv12的杂草识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 704
针对农田杂草高效识别与精准防控的需求，本研究基于深度学习目标检测算法YOLOv12，开发了一套杂草识别检测系统。系统以12类常见杂草（如鳢肠、牵牛、牛筋草等）为检测对象，构建包含2796张训练图像和523张验证图像的YOLO格式数据集，通过数据增强与迁移学习优化模型性能。系统集成Python开发的交互式UI界面，支持用户登录注册、实时检测与结果可视化，测试集平均精度（[email protected]）达94.1%。实验表明，YOLOv12在复杂农田场景下对小目标杂草具有鲁棒性，可为智慧农业杂草治理提供自动化解决方案。
博客
基于深度学习YOLOv11的杂草识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 343
本文基于YOLOv11深度学习框架，设计并实现了一套高效的杂草识别检测系统，旨在解决农业领域中杂草精准识别的实际问题。系统采用改进的YOLOv11算法，结合包含12类杂草（如eclipta、ipomoea等）的数据集（训练集2796张、验证集523张）。系统集成用户友好的UI界面，支持登录注册功能。实验表明，模型在验证集上达到较高精度（[email protected]为95%），显著优于传统方法。本研究为智慧农业中的杂草管理提供了自动化解决方案，代码与模型均已开源。
博客
基于深度学习YOLOv12的苹果成熟度识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 606
本文提出了一种基于深度学习YOLOv12的苹果成熟度识别检测系统，该系统能够高效准确地识别苹果的成熟度等级（包括20%、50%、75%、100%成熟及腐烂状态）。系统采用YOLOv12目标检测算法，结合自定义的YOLO格式数据集（包含训练集2144张、验证集359张和测试集225张图像），实现了高精度的成熟度分类。此外，系统配备了用户友好的UI界面，支持登录注册功能。
博客
基于深度学习YOLOv11的苹果成熟度识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 490
本文基于YOLOv11深度学习框架，开发了一套苹果成熟度识别检测系统，能够高效准确地识别苹果的成熟度等级（20%成熟、50%成熟、75%成熟、100%成熟）及腐烂状态。系统采用的YOLO格式数据集，包含训练集（2144张）、验证集（359张）和测试集（225张），共5类目标（'20-_ripeness', '50-_ripeness', '75-_ripeness', '100-_ripeness', 'rotten_apple'）。通过优化模型结构和训练策略，YOLOv11在测试集上实现了高精度检测（mA
博客
基于深度学习YOLOv12的轴承缺陷识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 484
轴承作为机械设备中的关键部件，其健康状态直接影响设备的运行效率与安全性。传统轴承缺陷检测方法依赖人工检查，存在效率低、主观性强等问题。为此，本文提出了一种基于深度学习YOLOv12的轴承缺陷识别检测系统，能够高效、准确地识别轴承表面缺陷。系统采用改进的YOLOv12目标检测算法，结合包含4类缺陷（凹槽、凹陷、擦伤、划痕）的数据集进行训练，其中训练集759张、验证集326张。实验结果表明，该系统在轴承缺陷检测任务中具有较高的识别精度和鲁棒性。此外，系统配备了用户友好的UI界面，支持登录注册功能，便于实际工业场
博客
基于深度学习YOLOv11的轴承缺陷识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 631
本文基于深度学习目标检测算法YOLOv11，设计并实现了一套轴承缺陷智能识别系统。针对工业场景中轴承表面常见的凹槽（aocao）、凹线（aoxian）、擦伤（cashang）和划痕（huahen）四类缺陷，构建了包含1,085张图像的数据集（训练集759张、验证集326张），通过数据增强和迁移学习优化模型性能。系统采用PyTorch框架开发，集成用户友好的UI界面与登录注册功能，支持实时检测与结果可视化。实验表明，YOLOv11在验证集上达到平均精度（[email protected]）99.5%，显著提高了缺陷检测效率。本研
博客
基于深度学习YOLOv12的水果识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 501
本文基于YOLOv12深度学习框架，设计并实现了一种高效的水果识别检测系统，支持苹果（Apple）、香蕉（Banana）、芒果（Mango）、橙子（Orange）、菠萝（Pineapple）和西瓜（Watermelon）六类常见水果的实时检测。系统采用包含768张训练集、129张验证集和110张测试集的自建YOLO数据集进行模型训练与评估，结合直观的UI界面及用户登录注册功能，提升了交互体验。
博客
基于深度学习YOLOv11的水果识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 538
本文设计并实现了一种基于深度学习YOLOv11的水果识别检测系统（苹果、香蕉、芒果、橙子、菠萝和西瓜）。系统采用YOLOv11目标检测算法，结合自建YOLO格式数据集（包含训练集768张、验证集129张和测试集110张图像），通过数据增强和模型优化提升检测鲁棒性。此外，系统集成用户友好的UI界面，支持登录注册功能。
博客
基于深度学习YOLOv12的红外森林火灾火焰烟雾识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 214
森林火灾是威胁生态环境和人类安全的重要灾害之一，快速准确的火灾检测对灾害防控至关重要。本文基于深度学习目标检测算法YOLOv12，构建了一套红外森林火灾火焰与烟雾检测系统。该系统利用红外图像数据，通过YOLOv12模型实现了对火焰（fire）和烟雾（smoke）的高精度实时检测，检测类别包括2类。数据集包含训练集1600张、验证集200张和测试集200张，确保了模型的泛化能力。系统还集成了用户友好的UI界面，支持登录注册功能。实验结果表明，该系统在复杂环境下仍能保持较高的检测准确率和鲁棒性，为森林火灾的早期
博客
基于深度学习YOLOv11的红外森林火灾火焰烟雾检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 730
针对森林火灾早期检测的需求，本研究提出了一种基于深度学习YOLOv11的红外森林火灾火焰与烟雾检测系统。该系统利用YOLOv11算法的高效目标检测能力，结合红外图像特性，实现了对火焰和烟雾的精准识别。数据集包含2000张标注图像（训练集1600张、验证集200张、测试集200张），涵盖多样化的火灾场景。系统集成用户友好的UI界面，支持登录注册功能。实验表明，该系统在测试集上达到较高的检测精度与实时性，为森林火灾防控提供了智能化解决方案。
博客
基于深度学习YOLOv12的木材缺陷检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 432
木材缺陷检测是木材加工和质量控制中的关键环节，传统人工检测方法效率低且易受主观因素影响。本文基于深度学习技术，提出了一种基于YOLOv12的木材缺陷检测系统，能够高效、准确地识别木材表面常见的三类缺陷：裂纹（Crack）、死节（Dead Knot）和活节（Live Knot）。系统采用YOLOv12算法进行目标检测，并整合了用户友好的UI界面、登录注册功能，实现了从数据标注到模型训练、测试及实际应用的全流程。实验结果表明，该系统在自建数据集（训练集2259张、验证集173张、测试集174张）上表现优异，为木
博客
基于深度学习YOLOv11的木材缺陷检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 508
木材缺陷检测是木材加工和质量控制中的关键环节，传统人工检测方法效率低且易受主观因素影响。本文基于深度学习技术，提出一种基于YOLOv11的木材缺陷检测系统，能够高效识别裂纹（Crack）、死节（Dead Knot）和活节（Live Knot）三类常见缺陷。系统采用包含2,259张训练图像、173张验证图像和174张测试图像的自定义YOLO数据集进行模型训练，并结合用户友好的UI界面及登录注册功能，实现了从数据标注到缺陷检测的一体化流程。实验结果表明，该系统在测试集上表现出较高的检测精度和鲁棒性，为木材工业的
博客
基于深度学习YOLOv12的电子元器件识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 531
本文基于YOLOv12深度学习算法，设计并实现了一套电子元器件自动识别与检测系统，支持电容器（Capacitor）、电感（Inductor）、LED（Led）、电阻（Resistor）和晶体管（Transistor）五类目标的实时检测。系统采用Python开发，集成用户友好的UI界面与登录注册功能，并基于YOLO格式数据集（训练集2103张、验证集226张、测试集97张）进行模型训练与优化。实验表明，该系统在测试集上实现了高精度检测，为电子元器件分类、库存管理及电路板质检等场景提供了高效解决方案。项目开源完
博客
基于深度学习YOLOv11的电子元器件识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 724
本文设计并实现了一种基于深度学习YOLOv11算法的电子元器件自动识别与检测系统，旨在提升电子元器件分类与定位的准确性和效率。系统以YOLOv11为核心检测模型，支持对电容器（Capacitor）、电感（Inductor）、发光二极管（Led）、电阻（Resistor）和晶体管（Transistor）五类元器件的实时识别。项目包含完整的Python实现代码、YOLO格式标注数据集（训练集2103张、验证集226张、测试集97张）以及用户友好的UI界面，集成登录注册功能。实验表明，该系统在测试集上实现了较高的
博客
基于深度学习YOLOv12的安全帽防护服识别检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 374
本文设计并实现了一种基于深度学习YOLOv12的工地安全帽与防护服识别检测系统，旨在提升施工现场的安全监管效率。系统采用改进的YOLOv12算法，结合包含5类目标（'helmet', 'no-helmet', 'no-vest', 'person', 'vest'）的自定义数据集进行训练，数据集规模为训练集997张、验证集119张、测试集90张。系统集成用户友好的UI界面，支持登录注册功能。实验表明，该系统在复杂工地场景下具有较高的检测精度与鲁棒性，为智能化安全管理提供了有效解决方案。
博客
基于深度学习YOLOv11的工地安全帽防护服识别检测系统（YOLOv11+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-16 619
本文设计并实现了一种基于深度学习YOLOv11算法的工地安全帽与防护服识别检测系统，旨在提升工地安全管理效率。系统采用YOLOv11模型进行目标检测，支持对安全帽（helmet）、未佩戴安全帽（no-helmet）、未穿防护服（no-vest）、普通人员（person）及防护服（vest）五类目标的实时识别。数据集包含训练集997张、验证集119张和测试集90张图像，覆盖多样化工地场景。系统集成用户友好的UI界面，确保数据访问安全性。实验表明，该系统在测试集上实现了较高的检测精度与实时性
博客
基于深度学习YOLOv12的钢材表面缺陷检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）
08-15 598
钢材表面缺陷检测是工业质量控制中的关键环节，传统检测方法依赖人工或简单图像处理技术，存在效率低、误检率高的问题。本文基于深度学习目标检测算法YOLOv12，构建了一套高效、准确的钢材表面缺陷检测系统。系统采用包含6类缺陷（crazing、inclusion、patches、pitted_surface、rolled_in_scale、scratches）的YOLO格式数据集，总计训练集2352张、验证集295张、测试集113张图像。系统集成用户友好的UI界面，支持登录注册功能，实现缺陷的实时检测与分类。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值