本地地址改成服务器端，src的正确写法是优先使用相对路径或基于项目根目录的路径，并通过构建工具或环境变量统一切换，切忌把本地盘符或IP写死在代码里。很多前端开发都经历过这个场景：本地页面一切正常，一部署到服务器上，图片裂了、样式丢了、脚本不加载了，打开控制台全是红色404，问题基本都出在src属性的写法上，你写的是C:/Users/你的电脑/项目/img/logo.png，还是localhost:8080/img/logo.png，服务器可认不得这些“本地门牌号”，本文用一个实际案例把坑踩平,给你几套可以直接抄的写法。
为什么你的src一上服务器就失效
服务器上的文件夹结构和你的本地开发目录完全不是一回事，本地文件走的是file://协议，开发服务器走的是localhost协议，而真正的服务器端走的是http(s)://你的域名协议，src属性就像一个门牌号，你给浏览器指路，路径写错,浏览器当然找不到资源。
有个拆解思路能帮你想明白：src里包含的路径，到底是“给服务器看的”还是“给浏览器看的”？答案是给浏览器看的，浏览器拿到页面后，根据src拼出一个完整的请求URL，所以src的写法取决于最终页面在浏览器里被访问的网址，而不是文件在服务器硬盘上的物理位置。
图片src绝对路径和相对路径区别
初学者最容易混的是这两个概念，绝对路径直接给完整地址，比如https://你的域名/img/logo.png，浏览器看到就跳，没有任何歧义，相对路径则不写域名，比如./img/logo.png，浏览器会拿当前页面地址的目录去拼，这两种写法在服务器上都能用，但影响不同,用表格划重点：
| 写法类型 | 示例 | 适用场景 | 风险点 |
|---|---|---|---|
| 根相对路径 | /img/logo.png |
项目部署在域名根目录 | 子目录部署会失效 |
| 相对路径 | ../img/logo.png |
页面和图片目录层级固定 | 层级深了容易算错 |
| 绝对路径 | https://域名/img/logo.png |
大型站点、CDN加速 | 换域名要全局替换 |
| 本地绝对路径 | C:/Users/... |
只在本地看效果 | 一上服务器就废 |
行业共识认为，现代前端项目已经很少手写src了，都是用构建工具（比如Vite、Webpack）来生成最终路径，工具会根据你配置的base或publicPath，自动把源码里的相对路径转成服务器端可访问的路径，这个环节不配置好,就会出现打包后图片路径404的问题。
服务器端src的三种标准写法
直接上实操代码，假设你的项目部署在服务器上，域名是https://example.com，项目文件夹叫web，里面有个图片/web/img/logo.png,下面三种写法都能正确加载这张图。
根相对路径（推荐给部署在域名根目录的站点）。
src="/img/logo.png"
注意开头那个正斜杠，它告诉浏览器“从域名根目录开始找”，不管当前页面在/web/a/b/page.html还是哪层，都稳稳指向https://example.com/img/logo.png。
基于HTML文件的相对路径，如果页面在/web/a/page.html，想找/web/img/logo.png，就得先回到web这一层。
src="../img/logo.png"
一个代表向上跳一级，这种写法的特点是跟着页面位置走，页面位置一旦变动,路径就得跟着改。
完整绝对路径。
src="https://example.com/img/logo.png"
这个最直接，但代价是如果换域名，得全站替换，一般配合环境变量做动态切换,把域名抽出来存到一个配置文件里。
前端资源路径服务器部署配置
实际项目中，你很少打开.html文件手动改src，而是在构建配置里统一搞定，以Vite项目为例，核心是改base配置。
本地开发时，base默认是,资源加载路径如下：
src="/img/logo.png"
打包后传到服务器子目录myapp，访问地址是https://example.com/myapp/，此时/img/logo.png会指向https://example.com/img/logo.png，404了，正确做法是在vite.config.js里这样设：
// vite.config.js
export default {
base: '/myapp/'
}
打包后，构建工具会自动把src改成/myapp/img/logo.png,服务器端加载成功。
转成相对路径也行，把base设为，工具会按页面相对位置算路径，但动态路由单页应用慎用,路由深层跳转后相对路径容易对不上。
多环境切换的实战配置
很多团队有开发、测试、生产三套环境，每套环境资源地址都不一样，这个场景下，最稳妥的解法是用一个环境变量控制src的起点，别在十几个组件里手写路径,那是在埋雷。
操作思路分三步，第一步，环境区分变量，项目根目录建两个文件，.env.development和.env.production如下：
# .env.production VITE_CDN_URL = https://cdn.example.com
第二步,在代码里这样拼src：
src="{import.meta.env.VITE_CDN_URL}/img/logo.png"
第三步，部署时分别用不同环境打包命令，开发环境跑vite，生产环境跑vite build，这时候，src在本地指向本地资源，在服务器上自动使用CDN地址,这也是前端资源路径服务器部署配置的标准思路之一。
vue项目打包后图片路径404怎么解决
专门说一个Vue项目高频问题：本地好好的，打包后图片全部裂了，造成这个结果的典型原因是public文件夹里的图片被直接引用了绝对路径，比如src="/img/logo.png"里那个开头斜杠在子目录部署时失效。
排查和修复按这个顺序来：
- 第一步，确认部署位置，是域名根目录还是子目录，对应调整
vue.config.js里的publicPath。 - 第二步，检查图片是否在assets目录，Vue CLI默认把assets里的小图片转base64，超过阈值会输出到
js或img目录，不要硬编码路径，用require()或import方式引入。 - 第三步，在css里写
background: url("/img/bg.png")时，同样受publicPath控制，写相对路径./img/bg.png更安全。 - 第四步，如果你的路由开了history模式，一定要用绝对路径，hash模式相反，用相对路径，这一点在官方文档里有说明,部署时很多人会踩。
排查路径问题的实操清单
如果你已经改了写法但还是404，按下面这个清单一步步查,比随机试效率高。
- 打开浏览器开发者工具，切到Network面板，刷新页面,找到报404的资源请求。
- 看那个请求的完整URL，是不是你预期浏览器该请求的地址，这个步骤能区分是“src写错”还是“服务器上根本没放这个文件”。
- 用服务器端命令行工具验证文件存在，比如在SSH终端输入
ls /var/www/web/img/,看有没有对应文件。 - 确认大小写，Linux服务器文件系统区分大小写，
Logo.png和logo.png
是两个文件，本地Windows不区分,所以本地没事服务器挂。
- 检查有没有反斜杠混进来，Windows习惯用
，浏览器和服务器端只认正斜杠，这个坑很隐蔽,肉眼不容易发现.
服务器端资源路径写法常见误区
此前还遇到过一个印象很深的实例：有人把部署目录的完整物理路径直接塞进src，写成src="/var/www/html/img/logo.png"，这个路径在页面里会被当成服务器上的一个URL路径去解析，浏览器尝试访问https://域名/var/www/html/img/logo.png，自然404，记住一条八字原则：服务器端路径和浏览器URL是两回事。
CDN加速场景下，src可以直接写CDN域名下的地址，例如https://你的CDN域名/img/logo.png，但要注意，配置CDN后，图片的最终地址由CDN分发节点吐出，路径里带的哈希文件名越短越有利,长文件名会拖累CDN缓存命中率。
回到最初的问题，本地地址改成服务器端怎么写src，核心答案是：别把本地特有前缀带进代码，用根相对路径或通过构建工具统一生成路径，再配合环境变量完成不同环境切换，路径写对了，资源加载就顺了，页面白屏、样式丢失这些连锁问题也会自动消失。
套用最后一句操练：每次部署后打开检查器看资源请求，多过两遍这套流程,踩坑的次数就少了。
相关问答
问：本地地址改成服务器端怎么写src最稳妥？
最稳妥的方式是使用根相对路径/img/logo.png，并将项目部署在服务器域名根目录，同时用构建工具的base或publicPath参数统一控制，如果必须部署在子目录，务必让构建工具自动生成带子目录前缀的资源路径,不要手工改每个src。
问：src里可以用CDN地址吗？小团队负载不高也可以。
CDN能加速CSS、JS和图片的加载，如果你有对象存储的公开访问域名，直接把域名前缀拼在资源文件名之前即可，要注意CDN地址必须支持CORS跨域，否则字体或Canvas相关加载会报错，配置后可验证HTTP响应头是否带Access-Control-Allow-Origin字段，据工信部2026年的数据，国内主流站点启用CDN的比例已达较大规模,这已经是服务器部署的标配。
问：相对路径和绝对路径在静态项目中混合使用有问题吗？
在一个项目里混用两种路径规则通常不会立刻报错，但会埋下隐患，比如页面在二级路由里，相对路径就会解析错，行业共识认为，小项目统一用根相对路径，大项目统一用构建工具生成的绝对CDN路径，至少在同一个项目内保持一种规则,是维护成本最低的选择。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/736043.html
