站内资源为什么推荐用根路径？图片、CSS和JS路径选择说明

网站文章里引用图片、CSS、JS或附件时，经常会遇到路径写法问题。比如同一张图片，可以写成完整URL，也可以写成从根目录开始的相对路径。

http://blog.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

这两种写法都可能正常访问，但在长期维护、HTTPS、网站迁移、测试环境和CDN部署上，差别很明显。对站内资源来说，更推荐使用第二种，也就是以/开头的根路径相对地址。

两种路径先分清

完整URL会把协议、域名和资源路径都写出来，例如http://blog.poxiaoxi.com/res/...。它的好处是地址完整，复制到站外、邮件、RSS或第三方平台时，别人也能直接访问。

根路径相对地址则从当前网站根目录开始写，例如/res/2026/0703/xxx.webp。浏览器会自动使用当前页面所在的协议和域名去请求资源。

比如当前页面是https://blog.poxiaoxi.com/seo/article.html，图片写成/res/2026/0703/xxx.webp时，浏览器实际请求的就是https://blog.poxiaoxi.com/res/2026/0703/xxx.webp。

站内更推荐/res

如果资源只在当前网站内部使用，比如文章图片、站内附件、CSS背景图、JS引用、本地上传文件，通常更适合写成根路径相对地址。

<img src="/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp" alt="图片说明">

这种写法不会绑定具体域名，也不会写死http或https。网站从测试环境切到正式环境、从HTTP升级到HTTPS、从旧域名迁移到新域名时，路径更容易保持可用。

对站内文章来说，这一点很重要。文章一旦发布，后续可能会有几百篇、几千篇内容。如果每篇正文里都写死完整域名，后期域名调整、HTTPS改造或资源目录迁移时，批量处理成本会明显增加。

完整URL的问题

完整URL最大的问题，是把当前环境写死了。比如下面这个地址：

http://blog.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

它至少绑定了三件事：协议是http，域名是blog.poxiaoxi.com，资源目录是/res/...。其中目录通常问题不大，但协议和域名一旦变化，旧内容就容易出问题。

如果网站后来启用HTTPS，而文章图片仍然写着http://，浏览器可能提示混合内容。轻则影响页面安全标识，重则部分资源被浏览器拦截，图片无法正常显示。

如果网站从blog.poxiaoxi.com迁移到其他域名，正文里的完整URL也需要批量替换。内容少时还能手动处理，内容多了就容易遗漏。

HTTPS下别写http

现在网站通常都应该使用HTTPS。如果页面本身是HTTPS，但图片、脚本或样式表使用HTTP加载，就可能产生混合内容问题。

对图片来说，有些浏览器会允许显示但标记页面不够安全；对JS、CSS等主动内容来说，浏览器更可能直接拦截。这会导致页面样式错乱、功能失效，甚至影响用户对网站安全性的判断。

所以，即使必须使用完整URL，也不建议写成http://。至少应该使用HTTPS：

https://blog.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

但如果是站内资源，直接使用/res/...通常更省心，因为它会自动继承当前页面协议。

相对路径也分类型

相对路径不只有一种。常见写法包括根路径相对地址、当前目录相对地址和上级目录相对地址。

文章正文里最稳定的相对写法是根路径相对地址，也就是以/开头。它不会受当前文章目录层级影响。

比如文章页面可能在/seo/a.html，也可能在/tools/browser/a.html。如果图片写成res/a.webp，不同目录下解析结果会不同；如果写成/res/a.webp，无论页面在哪个栏目，都会从网站根目录读取资源。

什么时候用完整URL

完整URL不是不能用，而是要用在适合的场景。只要资源需要离开当前网站环境，被外部平台、邮件客户端、RSS阅读器、第三方接口或其他站点读取，完整URL就更合适。

例如RSS订阅内容里，如果图片只写/res/a.webp，某些阅读器可能无法正确拼接域名。邮件正文也是类似情况，邮箱客户端通常需要完整图片地址才能加载远程图片。

站外投稿、第三方平台同步、接口返回内容、多站点调用资源、独立CDN资源，也更适合使用完整URL。

https://static.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

如果资源已经放到独立CDN域名，完整URL反而更清楚。因为它明确告诉浏览器从哪个资源域名加载，不再依赖当前页面域名。

CDN场景怎么选

如果网站还没有独立CDN域名，文章正文里使用/res/...比较稳。后续即使接入CDN，也可以通过服务器、反向代理或图片处理服务在不改正文的情况下优化资源访问。

如果网站已经规划好独立静态资源域名，例如https://static.poxiaoxi.com，并且长期稳定使用，那么图片可以写成完整CDN地址。这样有利于资源分发，也方便跨站调用。

但CDN域名一旦写进大量文章正文，后续更换CDN服务商或资源域名时，仍然会有批量替换成本。更灵活的做法是系统内部保存资源相对路径，页面输出时由程序根据配置拼接成站内路径或CDN路径。

对SEO有什么影响

图片路径本身不是SEO的核心排名因素，但路径写法会影响资源可访问性、HTTPS安全、页面加载稳定性和后期维护成本。这些问题间接影响页面体验。

如果图片因为混合内容被拦截，用户看不到图片，页面体验会变差；如果迁移后图片地址失效，文章内容完整性会受影响；如果资源地址到处写死，后期改版和优化会更麻烦。

对SEO更重要的是图片能稳定访问、尺寸合理、加载速度快、alt文本清楚、宽高属性完整。路径写法只要保证稳定、可维护、不产生安全问题，就算合格。

推荐在文章图片中补充alt，重要图片还可以写明width和height，减少页面加载时的布局偏移。

<img src="/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp" width="800" height="450" alt="文章配图说明">

数据库里存什么

如果是自己开发CMS或资源管理系统，建议数据库里优先保存资源相对路径，而不是完整URL。

/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

这样做的好处是数据更干净，不绑定环境。前台页面需要站内路径时，直接输出；需要API、RSS、邮件或站外内容时，再由程序拼接站点域名。

比如页面正文输出：

<img src="/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp" alt="图片说明">

RSS或邮件输出：

<img src="https://blog.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp" alt="图片说明">

同一份资源路径，根据不同使用场景生成不同结果，维护起来更灵活。

新手容易踩坑

第一个坑是把HTTP完整地址写进正文。网站升级HTTPS后，这类图片容易引发混合内容问题。以后新增内容尽量不要再写http://资源地址。

第二个坑是使用不带斜杠的相对路径，例如res/a.webp。它会受当前页面目录影响，栏目层级一变，图片路径就可能失效。站内资源更建议写成/res/a.webp。

第三个坑是把测试域名写进正式内容。比如测试环境是test.example.com，如果正文保存了完整测试域名，上线后很容易出现图片仍然从测试站加载的问题。

第四个坑是CDN域名没有长期规划就写死到文章里。短期看没问题，后期换CDN、换存储桶、换静态域名时，历史内容会成为负担。

推荐使用规范

如果是站内文章、站内图片、站内附件，推荐使用根路径相对地址：

/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

如果写在HTML正文里，可以这样处理：

<img src="/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp" width="800" height="450" alt="图片说明">

如果是RSS、邮件、接口、站外同步、第三方平台引用，使用完整HTTPS地址：

https://blog.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

如果资源已经统一放在独立静态资源域名，并且这个域名长期稳定，可以使用CDN完整地址：

https://static.poxiaoxi.com/res/2026/0703/17094432d96f487f35d0091ecd3ed378.webp

实际使用怎么判断

简单判断就是：只在本站页面里用，优先写/res/...；要给站外平台、RSS、邮件或其他域名调用，就写完整HTTPS地址；如果已经有稳定CDN，就按CDN资源地址输出。

对大多数站内文章来说，/res/2026/0703/xxx.webp这种根路径相对地址更合适。它能自动适配当前域名和协议，减少HTTPS混合内容、域名迁移和测试环境切换带来的麻烦。

路径写法看起来是小问题，但内容越多，维护成本越明显。前期把站内资源路径规范定好，后期改版、迁移、接入CDN和批量处理图片时会省很多事。