HTML網(wǎng)頁中顯示圖片使用標(biāo)簽<img>

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

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

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

但有時(shí)我們添加的圖片無法顯示

下面給出一些解決方法：

一.html插入本地圖片

下載圖片到本地

1.絕對(duì)路徑

如<img src="D:\mysite\templates/eg_cute.gif" width="300" height="300" />
其中D:\mysite\templates/eg_cute.gif為圖片路徑
一般路徑?jīng)]有問題，圖片沒有問題，顯示就不會(huì)出錯(cuò)

2.相對(duì)路徑

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

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

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

二.html插入網(wǎng)頁圖片

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

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

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

正常顯示

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。