HTML網頁中顯示圖片使用標簽<img>

要在頁面上顯示圖像，需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：<img src="url" />
定義圖片大小：<img src="url" width="x" height="y"/>

URL 指存儲圖像的位置。如果名為 “boat.gif” 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。

但有時我們添加的圖片無法顯示

下面給出一些解決方法：

一.html插入本地圖片

下載圖片到本地

1.絕對路徑

如<img src="D:\mysite\templates/eg_cute.gif" width="300" height="300" />
其中D:\mysite\templates/eg_cute.gif為圖片路徑
一般路徑沒有問題，圖片沒有問題，顯示就不會出錯

2.相對路徑

將圖片和html文件放在同一路徑下，在編寫html文件時就只用寫文件的相對路徑了
如
main_page.html和eg_cute.gif都在template 文件夾里面
編寫時url只用寫圖片的名稱即可：
<img src="eg_cute.gif" width="300" height="300" />
正常顯示

但是在一個project里面我們一般會想要將html和圖片分開存放
存放在不同的文件夾里面，也可以使用相對路徑
如圖片存放在img文件夾下面，html存放在template文件夾下面，找到他們的公共根目錄mysite

此時圖片的url改為/mysite/img/eg_cute.gif即可

二.html插入網頁圖片

確保圖片地址正確即可（有后綴 .jpg .png等后綴名）
如：插入csdn的logo
先復制圖片地址（右擊選擇復制圖片 鏈接)

圖片鏈接為https://img-home.csdnimg.cn/images/20201124032511.png

修改html代碼即可
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" width="300" height="200" />

正常顯示

總結

以上是生活随笔為你收集整理的HTML网页中显示图片（相对路径 绝对路径）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。