部署的项目图片路径怎么404了?

前言

如果说平时工作中遇到这个问题,你该怎么解决?直接去问搜索引擎或者是GPT?那将会非常的低效,为什么我写文章一直在强调你学习东西要系统连贯的学,因为当你出现大的知识断层的时候,很多问题往往你不知道该从何入手,谈何去如何解决呢?

首先图片404了,你首先要能定位这是前端的问题还是后端的问题对吧,比如说打开控制台,我们看到的是前端的引用的静态资源都找不到了,然后继续分析图片路径对吧,你发现图片的路径怎么不对,少了一个/XXX,噢,你反应过来,你忘记了在vue.config.js里面增加某某配置,好吧,加上搞定,这才是解决问题的流程吧。

不管说你是用webpack打包工具构建你的项目也好,用vite或者其他等等,遇到问题你一定要找到事情的本质,首先解决这个问题你要清楚的理解几个概念,什么是相对路径,什么是绝对路径,脚手架里或者打包工具里面提供的publicPath是干什么用的,可以解决什么问题。如果你对这些概念没有一个很清晰的认知,你该怎么去一步步分析解决问题呢?

绝对路径与相对路径

先引用wiki的官方解释:

获取了什么信息,绝对路径或者全路径指向文件系统的相同位置,相对路径起始于被给出的工作目录。

为什么理论的东西很枯燥,因为理论就是文字,不应用它就是一段文字。为了不让它显得枯燥,我们应该想想,当我们访问一个网站的时候,去请求nginx服务器,拿到我们的页面对吧,假如,我们把前端项目部署在nginx的根目录下,那么我们去访问图片资源是没有问题的,想一想为什么?

1.假如说我们的域名为http://www.xxx.xx, 我们的图片路径默认用的是相对路径,比如是images/xx.png,那么当我们访问http://www.xxx.xx/index.html的时候,图片的路径是不是就是http://www.xx.xx/images/xx.png对吧,这样就能够找到对应的图片。

2.如果说(我是说如果),此时我的index.html被我最终打包进了app文件夹,而静态资源路径我保持之前路径没变,我问你此时资源的路径会出现什么问题?来别着急,先想一想,给你三分钟,好时间到了,我们来看看问题,那么我们此时访问页面时就变成了http://www.xxx.xx/app/index.html,对不对,那么资源路径呢?变成了http://www.xxx.xx/app/images/xx.png,根据wiki的解释我们不难得出这个结论吧,那我问你这个路径下有这个图片吗?没有吧兄dei?你说他不报404谁报404呢。 所以如果我们不配置,默认webpack打包资源是用的相对路径,会有问题的,脚手架当然会帮我们考虑到这些问题,所以引出了下面的概念。

publicPath

恭喜你,来到了publicPath,它的作用是什么?先来看看文档怎么说:

清晰了吧,vue-cli脚手架的publicPath的配置是和webpack的是一样的,来看看他的默认值是什么'/',什么意思?这个斜杠的作用就是将 相对路径变成绝对路径! 请务必区分 images/xx.png和/images/xx.png的区别,前者为相对路径,后者为绝对路径。那么我们上面提到的问题便迎刃而解,当我们访问index.html的时候,图片的路径则变成了绝对路径 http://www.xxx.xx/images/xx.png,该路径是正确的可以访问到的。

文档里还提到了,如果你的项目部署在了nginx子路径下,那么同样的为我们的资源配置上对应的绝对路径前缀就好啦!你仔细在你的大脑里品一品这个相对路径和绝对路径。

所以说啊我们不要迷信,但是也要相信因果,因为你了解了一些前置知识,才能得到解决这个问题的结果。

尾声

我写文章注重的是分享思路,我认为思路一定是大于某一个具象的点,如果我不管三七二十一给你抛出来一个问题,然后不管三七二十一给你一个答案,有意义吗?是,问题可能是暂时解决了,如果你遇到类似的问题的时候呢?我希望你可以有自己的思路去想办法解决它。

相关推荐
呆呆没有脑袋2 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe10103 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵3 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试