为什么 js 对象中引用本地图片需要写 require 或 import

1、模块化系统的要求:

现代前端工程(如 Vue、React)使用 webpack / vite 等构建工具,这些工具要求所有静态资源必须显式声明依赖;

require / import 是告诉 webpack / vite 这个文件是我的项目依赖,请处理它,如果直接写成普通路径(如:img: '@/assets/apply/p.jpg')会被当成字符串,webpack / vite 不会处理这个文件;

2、构建工具的工作流程:

1.找到图片文件;

2.压缩/优化图片;

3.将图片复制到输出目录(如 dist 文件夹);

4.返回最终的文件路径;

3、路径转换问题:

开发时可能写的相对路径,但构建后的文件结构会变化,require 会动态解析路径,确保无论构建后的文件如何分布,最终路径都是正确的;

require 和import区别:

可以把 require 和import 想象成两种不同的的"快递服务",都能帮你把本地图片送到网页显示,但服务方式不同:

|----------|---------------------------|------------------------------|
| 特点 | require (CommonJS) | import (ES odule) |
| 调用时机 | 任何地方随时调用 | 必须在文件顶部先声明 |
| 支持环境 | Node.js原生支持 | 现代浏览器原生支持 |
| 写法 | const img = require('路径') | import img from '路径' |
| 静态分析 | 较难优化(不如 import 友好) | 更容易优化和 tree-shaking(删除未使用代码) |
| 动态加载 | 支持动态路径 | 需要特殊写法 import() |

建议:

1、新项目尽量用 import 更现代,性能更好;

2、旧项目或 Node.js 环境可以用 require;

3、注意:纯浏览器环境不能直接使用 require,需要 webpack 等工具;

两种方式在 webpack / vite 等工具中最终效果是一样的,只是写法不同

相关推荐
患得患失94920 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
UQWRJ21 分钟前
菜鸟教程R语言一二章阅读笔记
开发语言·笔记·r语言
飛_23 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
岁忧2 小时前
macOS配置 GO语言环境
开发语言·macos·golang
朝朝又沐沐3 小时前
算法竞赛阶段二-数据结构(36)数据结构双向链表模拟实现
开发语言·数据结构·c++·算法·链表
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
魔尔助理顾问3 小时前
系统整理Python的循环语句和常用方法
开发语言·后端·python
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js