浏览器解析html文件src静态资源路径问题

  1. 相对路径
    src资源引号内部不以/分割符开头,浏览器从当html文件前路径拼接url:
    场景a
    <img src="static/1.jpeg" width="258" height="39" />
    当前请求地址xxxx:80/html/1.html
    浏览器解析图片地址为xxxx:80/html/static/1.jpeg

    场景b
    <img src="../static/1.jpeg" width="258" height="39" />
    当前请求地址xxxx:80/html/user/1.html
    浏览器解析图片地址为xxxx:80/html/static/1.jpeg

  2. 绝对路径
    src资源引号内部以/开头,代表从当前站点配置的根目录开始拼接url
    场景a
    <img src="/static/1.jpeg" width="258" height="39" />
    当前请求地址xxxx:80/html/1.html
    浏览器解析图片地址为xxxx:80/static/1.jpeg

    场景b
    <img src="/static/1.jpeg" width="258" height="39" />
    当前请求地址xxxx:80/html/user/1.html
    浏览器解析图片地址为xxxx:80/static/1.jpeg

  3. 网络资源路径
    src是完整网络资源的url,由于涉及版权和盗链问题,一般不用。
    <img src="http://static.com/images/logo.png" width="300" height="120"/>

  总结:使用相对路径定位需要html文件和静态资源css,js,img等位置固定,不能动态调整,适用于测试开发阶段。正式环境中,由于静态资源一般会单独配置存储位置和缓存,所以一般用绝对定位。比如nginx经常会对location /static/这种资源单独配置,所以所有静态资源都必须以/static开头。一些web后端框架动态渲染页面,路由url都是单独配置,html文件也是动态生成,此时必须用绝对定位。

posted @ 2024-08-18 20:04  今夕何兮  阅读(41)  评论(0编辑  收藏  举报