为什么 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 等工具中最终效果是一样的,只是写法不同

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试