咨询：子域名环境下本地图片链接失效的原因

嗨，我来帮你捋捋这个问题的原因和解决办法～

为啥会出现这个问题？ #

你用主域名http://example.com/site/index.php访问时，<img src="icons/icon.png">这个相对路径会被浏览器解析成http://example.com/site/icons/icon.png，刚好和图片的实际存储路径对上，所以能正常显示。

但切换到子域名http://site.example.com后，相对路径就变成了http://site.example.com/icons/icon.png，可你的图片其实存在主域名的/site/icons/目录下，子域名的根目录和主域名的/site/目录根本不是同一个位置，浏览器当然找不到资源啦！

具体怎么解决？ #

给你几个实用的方案，按需选就行：

1. 改用绝对路径（最省心推荐） #

直接把图片引用改成基于主域名根目录的绝对路径，不管用主域名还是子域名访问，都会精准指向正确位置：

<img src="/site/icons/icon.png">

要是担心跨域问题（不过同域名下子域名一般没问题），也可以写完整的URL：

<img src="http://example.com/site/icons/icon.png">

2. 把子域名的根目录指向主域名的/site/文件夹 #

如果你能改服务器配置（比如Nginx、Apache），可以把site.example.com的根目录设置成主域名下的/site/文件夹。这样子域名访问时，相对路径就和主域名/site/下的路径一致了，图片自然就能加载。

举个例子，Apache的配置大概是这样：

<VirtualHost *:80>
    ServerName site.example.com
    DocumentRoot /var/www/example.com/site
    # 其他常规配置...
</VirtualHost>

Nginx的配置类似：

server {
    listen 80;
    server_name site.example.com;
    root /var/www/example.com/site;
    # 其他常规配置...
}

3. 复制图片到子域名根目录（不推荐，维护麻烦） #

把/site/icons/里的图片复制一份到子域名对应的服务器文件夹的icons/目录下。不过这种方法后期维护太费劲，每次更新图片都要同步两份，除非万不得已，不然别用这个。

最后测试小技巧 #

改完之后，先在浏览器里直接访问对应的图片URL（比如用绝对路径的话就访问http://site.example.com/site/icons/icon.png），确认能打开图片后，再刷新页面看是否正常显示就好啦～

新年快乐哦！

内容的提问来源于stack exchange，提问作者user2033139