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

静态资源和动态资源

  • 静态资源

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

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

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

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

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

静态资源编译

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

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

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

相关推荐
WeiShuai8 分钟前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
forwardMyLife13 分钟前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
ice___Cpu14 分钟前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )
linux·运维·前端
JYbill17 分钟前
nestjs使用ESM模块化
前端
加油吧x青年36 分钟前
Web端开启直播技术方案分享
前端·webrtc·直播
计算机学姐1 小时前
基于python+django+vue的影视推荐系统
开发语言·vue.js·后端·python·mysql·django·intellij-idea
luoluoal1 小时前
java项目之基于Spring Boot智能无人仓库管理源码(springboot+vue)
java·vue.js·spring boot
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(二)
前端·react.js·前端框架
小白小白从不日白1 小时前
react hooks--useCallback
前端·react.js·前端框架
恩婧2 小时前
React项目中使用发布订阅模式
前端·react.js·前端框架·发布订阅模式