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

静态资源和动态资源

  • 静态资源

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

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

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

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

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

静态资源编译

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

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

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

相关推荐
Csvn9 小时前
WASM
前端
修己xj10 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing0310 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿11 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying12 小时前
网购能买Token了!
前端
h_654321012 小时前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马13 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture13 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李13 小时前
openFeign入门
java·开发语言·前端
馒头不想说话13 小时前
AI当运营,帮你省人力
前端