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

静态资源和动态资源

  • 静态资源

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

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

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

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

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

静态资源编译

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

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

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

相关推荐
xiaogg36782 小时前
spring oauth2 单点登录
java·vue.js·spring
雾岛听风6913 小时前
JavaScript基础语法速查手册
开发语言·前端·javascript
遇见~未来3 小时前
第三篇_现代布局_从弹性到网格
前端·css3
前端那点事3 小时前
Vue前端SEO优化全攻略(实操落地版,新手也能上手)
前端·vue.js
Dxy12393102163 小时前
HTML 如何使用 SVG 画曲线
前端·算法·html
用户2367829801683 小时前
从零实现 GIF 制作工具:LZW 压缩与 Median Cut 色彩量化
前端·javascript
hahaha 1hhh3 小时前
中文乱码 ubuntu autodl
linux·运维·前端
棉猴3 小时前
Python海龟绘图之绘制文本
javascript·python·html·write·turtle·海龟绘图·输出文本
计算机学姐3 小时前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app
Codebee3 小时前
Harness Engineering:AICode 的灵魂
前端·人工智能·前端框架