图片不显示[关闭]
Posted
技术标签:
【中文标题】图片不显示[关闭]【英文标题】：Image doesn't show up [closed] 【发布时间】：2022-01-23 03:51:06 【问题描述】：我是 html 和 CSS 的新手，我不知道为什么我的图片不显示。这是我的代码。
.test
width: 100%;
height: 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class=test>
<img src="file:///Users/myname/Desktop/picture%201.jpg" >
</div>
</body>
</html>【问题讨论】：
您的路径很可能是错误的。您是在本地计算机上打开 HTML 页面，还是尝试在服务器上打开它？ 很可能问题出在 src 属性中的路径。尝试使用所谓的“相对路径”，它是从 html 文件的位置链接...最简单的方法是将图像放入 html 文件所在的同一文件夹中，然后使用 src="picture% 201.jpg”。 使用相对路径，文件名中不要有空格。这不一定是这里的问题，但仍然是一个很好的规则 【参考方案1】：你的错误在这里src="file:///Users/myname/Desktop/picture%201.jpg"你在Users之前缺少drive name例如C:或D:file:///C:/Users/myname/Desktop/picture%201.jpg
你的src="" 看起来像src="YourProject/imagefolder/picture.jpg"
我使用了一张随机的在线可用图片。 src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578"
.test
width: 100%;
height: 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test">
<!-- <img src="file:///Users/myname/Desktop/picture%201.jpg" > -->
<img src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578" >
</div>
</body>
</html>【讨论】：
class=test 有效。 ***.com/questions/13056683/…【参考方案2】：
问题在于 src 中提到的图像路径。您必须提及正确的图片路径，否则图片将不会显示在您的页面中。
.test
width: 100%;
height: 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class=test>
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
</div>
</body>
</html>【讨论】：
这个答案添加了哪些现有答案尚未涵盖的内容？以上是关于图片不显示[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
图片不显示，关闭时出错 --> Debug Assertion Failed！表达式：is_block_type_valid(header->_block_use)