如图,通过live server插件预览是正常,蛋但是不发不到服务器,或是直接点击链接,页面跳转失败,图片加载失败
来源:3-2 VSCode安装、配置和插件
土豆60
2023-01-03 10:31:56
相关代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>陈晶的网站</title> <link rel="stylesheet" href="css/home.css"> <link rel="stylesheet" href="css/ty.css"> </head> <body> <div class="nav"> <div class="logo"> <a href="/index.html"><img src="/images/logo.png" alt=""></a> </div> <div class="rignt"> <ul> <li> <div class="li li_g"> <a href="/about.html">关于</a> </div> </li> <li> <div class="li li_z">作品</div> </li> </ul> </div> </div> <div class="header"> <h1>标题文本内容</h1> <h3>副标题</h3> </div> <div class="main"> <div onclick="window.open('/one.html','_self')" class="item item1"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item2"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item3"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item4"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item5"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item6"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> <div class="item item6"> <a href="/one.html"> <img src="/images/1.png" alt=""> </a> </div> </div> <div class="footer"> </div> </body> </html>
完整代码下载地址
https://share.weiyun.com/aAkcabOE
1回答
同学你好,不清楚同学服务器具体是怎么搭建的,因为代码中a标签的href属性和img的src属性,引入的文件地址都是以/开头的,相当于是使用了绝对路径,所以,不使用Live Server,直接打开是无法加载图片的。
可以从如下角度排查问题:
1、查看服务器的文件夹位置,以当前index.html文件所在的文件夹作为服务器的根目录。
2、调整为相对路径,即:将 / 换成 ./ 试试。
祝学习愉快~
相似问题