如图,通过live server插件预览是正常,蛋但是不发不到服务器,或是直接点击链接,页面跳转失败,图片加载失败

来源:3-2 VSCode安装、配置和插件

土豆60

2023-01-03 10:31:56

https://img.mukewang.com/climg/63b3918109a942fe25442414.jpg


相关代码:

<!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回答

好帮手慕慕子

2023-01-03

同学你好,不清楚同学服务器具体是怎么搭建的,因为代码中a标签的href属性和img的src属性,引入的文件地址都是以/开头的,相当于是使用了绝对路径,所以,不使用Live Server,直接打开是无法加载图片的。

可以从如下角度排查问题:

1、查看服务器的文件夹位置,以当前index.html文件所在的文件夹作为服务器的根目录。

2、调整为相对路径,即:将 / 换成 ./  试试。

祝学习愉快~

0

0 学习 · 17877 问题

查看课程