在Vue中动态引入图片为什么要用require

静态资源和动态资源

  • 静态资源

    • 动态的添加src
  • 动态资源

    • 我们通过网络请求从后端获取的资源

动态的添加src会被当成静态资源

动态的添加src最终会被打包成:
在这里插入图片描述

动态的添加图片最会会被编译成一个静态的字符串,然后再浏览器运行中会去项目中查找这个资源,

静态资源编译

默认情况下src目录的所有文件都会打包一个新的文件名,然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了
在这里插入图片描述

当我们使用require引入一张图片的时候,webpack会将这个图片当成一个模块,并根据配置文件的配置然后进行打包,最终返回一个大包的地址
在这里插入图片描述

动态引入一个图片的时候,它其实是一个变量,webpack会根据v-bind的一个命令去解析SRC后面的值,并不会通过require引入资源的对象

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库--MySQL

一、什么是范式? 范式是数据库设计时遵循的一种规范,不同的规范要求遵循不同的范式。 最常用的三大范式 第一范式(1NF):属性不可分割,即每个属性都是不可分割的原子项。(实体的属性即表中的列) 第二范式(2NF):满足…

操作系统搭建相关知识

系统篇 systemctl命令 常用于重启系统的每个服务,例如重启系统的网络,使用restart参数!!! 网络篇 ifconfig命令 注意:如果有过多块网卡,例如:eth0和eth1网卡,一般查看那个参数上面带有RUNNING和UP网卡开…

TFRecords详解

内容目录 TFRecords 是什么序列化(Serialization)tf.data 图像序列化(Serializing Images)tf.Example函数封装 小结 TFRecords 是什么 TPU拥有八个核心,充当八个独立的工作单元。我们可以通过将数据集分成多个文件或分片(shards)…

Flutter父宽度自适应子控件的宽度

需求: 控件随着金币进行自适应宽度 image.png 步骤: 1、Container不设置宽度,需要设置约束padding; 2、文本使用Flexible形式; Container(height: 24.dp,padding: EdgeInsetsDirectional.only(start: 8.dp, end: 5.d…

文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库,不用安装Microsoft Office,就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…

web后端解决跨域问题

目录 什么是跨域问题 为什么限制访问 解决 什么是跨域问题 域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对js施加的安全…

springboot文件上传和下载接口的简单思路

springboot文件上传和下载的简单思路 文件上传文件下载 文件上传 在springboot中,上传文件只需要在接口中通过 MultipartFile 对象来获取前端传递的数据,然后将数据存储,并且返回一个对外访问路径即可。一般对于上传文件的文件名&#xff0c…

C语言 冒泡排序

目录 一、原理 二、代码演示 三、代码优化 一、原理 假设: int arr[] { 9,8,7,6,5,4,3,2,1,0 }; 将 arr 内的元素进行升序排列,得到一个新的数组 int arr[] { 0,1,2,3,4,5,…

【HTML】<input>

分类 text password number button reset submit hidden radio checkbox file image color range tel email(火狐有校验,360浏览器无校验。) url datetime(火狐、360浏览器不支持) search date、month、week、time、da…

自动测试框架airtest应用一:将XX读书书籍保存为PDF

一、Airtest的简介 Airtest是网易出品的一款基于图像识别和poco控件识别的一款UI自动化测试工具。Airtest的框架是网易团队自己开发的一个图像识别框架,这个框架的祖宗就是一种新颖的图形脚本语言Sikuli。Sikuli这个框架的原理是这样的,计算机用户不需要…

prometheus监控k8s服务并告警到钉钉

一、监控k8s集群 要监控k8s集群需要使用到以下服务用于收集监控的资源信息,node_exporter用于监控k8s集群节点的资源信息,kube-state-metrics用于监控k8s集群的deployment、statefulset、daemonset、pod等的状态,cadvisor用于监控k8s集群的p…

anaconda 基本指令

1.anaconda添加源 这两行命令分别添加了清华Anaconda 仓库的 main 和 free 镜像源。 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/2.anac…