浏览器解析html文件src静态资源路径问题
-
相对路径
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 -
绝对路径
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 -
网络资源路径
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文件也是动态生成,此时必须用绝对定位。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步