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

静态资源和动态资源

  • 静态资源

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

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

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

动态的添加src最终会被打包成:

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

静态资源编译

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

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

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

相关推荐
lijgvnns5 分钟前
个人AI编程工具的vibe coding实践:从爬虫到导出Excel的全流程
开发语言·javascript·ecmascript
এ慕ོ冬℘゜12 分钟前
jQuery 高可用多图上传组件(企业级封装 + 踩坑全解 + 可直接上线)
前端·javascript·jquery
爱勇宝18 分钟前
AI 时代,前端工程师的话语权正在下降?
前端·后端
kymjs张涛18 分钟前
一个月,纯VibeCoding,全平台云笔记APP
前端·javascript·后端
巴勒个啦25 分钟前
esbuild 插件实战:5个真实场景带你自定义构建流水线
前端·angular.js
英勇无比的消炎药29 分钟前
一文吃透TinyRobot Bubble:从基础组件搭建完整AI消息渲染体系
vue.js
狗头大军之江苏分军33 分钟前
前端路由是怎么来的
前端·javascript·后端
英勇无比的消炎药34 分钟前
深挖底层:TinyRobot Bubble消息气泡组件核心技术原理
vue.js
英勇无比的消炎药35 分钟前
架构剖析:TinyRobot Bubble渲染器状态管理与工具调用机制
vue.js
英勇无比的消炎药36 分钟前
多模态消息渲染实战:TinyRobot Bubble内容解析与contentResolver用法
vue.js