我想知道如何在 html 的 div 元素中插入影像。我曾嘗試在 div 元素內部插入一個影像，但沒有一個對我有用，我不知道如何讓它作業。我想知道如何將我的影像插入 div 元素內，以便我的程式實際顯示它。問題是我的影像從不顯示，我的解決方案對我不起作用。這是簡單而完整的代碼：https : //jsfiddle.net/mxafg1vu/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Holograms</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="title">
<h2>Holograms In The Future?</h2>
<h5>November 24th, 2021.</h5>
<!-- <div style="height:200px; width: 200px"></div> -->
<!--Img src -->
<img src="hologram.jpg" alt="Holograms" width="500" height="500"><br>
<p>Text </p>
<p>Text </p>
</div>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
</html>
uj5u.com熱心網友回復：
有用！我認為你的路徑是錯誤的。在您的示例中，alt標簽被顯示，圖片正在嘗試加載，但沒有找到影像。
如果影像與 .html 位于同一目錄中：
src="image.png"
如果它位于 .html 下的目錄中： src="../asdf/image.png"
如果它不是本地存盤的，他們只是插入 url，就像我下面的例子一樣：
* {
box-sizing: border-box;
}
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
#hologram {
width: 48px;
height: 48px;
}
#container img {
width: 100%;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Holograms</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="title">
<h2>Holograms In The Future?</h2>
<h5>November 24th, 2021.</h5>
<!-- <div style="height:200px; width: 200px"></div> -->
<!--Img src -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" alt="Holograms" width="500"><br>
<p>Text </p>
<p>Text </p>
</div>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
</html>uj5u.com熱心網友回復：
要顯示影像，您必須在屬性上指定影像的正確路徑；
<img src="https://raw.githubusercontent.com/sayeedap/sayeedap/main/images/stackoverflow.svg" alt="Girl in a jacket" width="500" height="600">
https://jsfiddle.net/Lha89uqv/
uj5u.com熱心網友回復：
的src或href屬性要求的屬性到任何外部源鏈接到HTML檔案。
以下是指定檔案路徑的不同型別：
<img src="picture.jpg"> It specifies that picture.jpg is located in the same folder as the current page.
<img src="images/picture.jpg"> It specifies that picture.jpg is located in the images folder in the current folder.
<img src="/images/picture.jpg"> It specifies that picture.jpg is located in the images folder at the root of the current web.
<img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one level up from the current folder.
例子
<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">
</body>
</html>
uj5u.com熱心網友回復：
<div id="title">
<h2>Holograms In The Future?</h2>
<h5>November 24th, 2021.</h5>
<div id ="hologram">
<!--Img src -->
<img src="hologram.jpg" alt="Holograms"><br>
</div><br>
<p>Text </p>
<p>Text </p>
</div>
確保影像路徑正確。
$("#hologram").prepend(`<img src="https://i.picsum.photos/id/938/200/200.jpg?hmac=92xbyQ6vbS3815L2g4uCHhtDVrdsdJfHq76-23joI3M" alt="Holograms">`);
正確的圖片網址
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365493.html
上一篇：獲取固定高度div中文本的高度