HTML <img> src Atributo

HTML <img> 标籤

Pagsasakop at paggamit

Mga kinakailangan src Atributo na nagbibigay ng URL ng image

May dalawang paraan para tukuyin ang URL ng image sa atributo. src Tukuyin ang URL sa atributo:

1. Absolute URL - Ikonekta sa panlabas na image na naka-host sa ibang website. Halimbawa:

src="https://www.codew3c.com/images/img_girl.jpg"

Babala:Ang mga panlabas na image ay maaaring may karapatang pang-likha. Kung hindi mo nakuha ang lisensya para gamitin ito, maaaring lumabag sa batas ng karapatang pang-likha. At hindi mo makokontrol ang panlabas na image; maaaring bigyan ito ng pag-alis o pagbabago nang biglang nangyari.

2. Relative URL - Ikonekta sa image na naka-host sa loob ng website.

Dito, ang URL ay hindi kasama ang domain. Kung ang URL ay hindi nagsisimula ng pahaba ng tali, ito ay kaugnay ng kasalukuyang pahina. Halimbawa:

src="img_girl.jpg".

Kung ang URL ay nagsisimula ng pahaba ng tali, ito ay kaugnay ng domain. Halimbawa:

src="/images/img_girl.jpg".

提示：Maaaring mas mabuti na gamitin ang relative URL. Kung binago mo ang domain name, hindi ito magdudulot ng putol sa link.

Babala:Kung hindi makakita ang browser ng image, ipapakita ang simbolo ng balingkas na link at ang alt text.

提示：Para sa pag-iayos ng pag-iimbak ng dokumento, karaniwang inilalagay ng mga tagapaglikha ang mga image file sa isang hiwalay na folder, at karaniwang ipinangalan ang mga katulad na directory na 'pics' o 'images'. Sa online tutorial ng CodeW3C.com, inilagay ng aming mga inhinyero ang karamihan sa mga pinakakaraniwang image sa isang folder na may pangalan na 'i', na 'i' ay pangalang maikling form ng 'images'. Ang pinakamagandang kalakip nito ay ang simpleng path sa pinakamataas na antas.

Mga halimbawa

Sa mga sumusunod na halimbawa, kinuha namin ang larawan ng tulip sa Shanghai Flower Port na ginawa ng mga inhinyero ng CodeW3C.com, ang pangalan ng file na 'eg_tulip.jpg', na nakatago sa 'i' folder sa server. Ito ang orihinal na code:

<img src="/i/eg_tulip.jpg" />

以上代碼的效果：


親自試試

提示：您可以在我們的線上測試工具中親自試試，如果您把例子中的文件名更改为"eg_chinarose.jpg"，會看到一幅月季花的照片。就像這樣：

源代碼：

<img src="/i/eg_chinarose.jpg" />

以上代碼的效果：

語法

<img src="URL">

屬性值

值 描述
URL

規定圖片的 URL。

可能的值：

  • 絕對 URL - 指向另一個網站（如 src="http://www.example.com/image.gif"）
  • 相對 URL - 指向網站內的文件（如 src="image.gif"）

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <img> 标籤