Ang pangunahing problema na nauugnay sa pagdaragdag ng HTML ng mga larawan mula sa mga malalayong mapagkukunan ay maaari itong humantong sa mabagal na oras ng paglo-load ng pahina. Ito ay dahil ang browser ay dapat gumawa ng isang hiwalay na kahilingan para sa bawat larawan, na maaaring mabilis na magdagdag kung mayroong maraming mga larawan sa pahina. Bukod pa rito, kung ang remote na pinagmulan ay hindi gumagana o may mabagal na koneksyon, maaari itong higit pang maantala ang mga oras ng paglo-load ng pahina. Sa wakas, mayroon ding mas mataas na panganib ng mga kahinaan sa seguridad dahil ang mga larawan ay kinukuha mula sa isang panlabas na pinagmulan.
<img src="https://example.com/image.jpg" alt="Example Image">
1. Ang linya ng code na ito ay isang HTML image tag, na ginagamit upang magpakita ng larawan sa isang webpage.
2. Tinutukoy ng attribute na “src” ang URL ng larawang ipapakita, sa kasong ito ito ay “https://example.com/image.jpg”.
3. Ang attribute na "alt" ay nagbibigay ng alternatibong text para sa larawan, sa kasong ito ito ay "Example Image".
katangian ng img src
Ang img src attribute sa HTML ay ginagamit upang tukuyin ang pinagmulan ng isang imahe. Ito ay ginagamit sa loob ng tag upang tukuyin ang pinagmulan ng isang larawan. Ang halaga ng katangiang ito ay dapat na isang wastong URL na tumuturo sa isang file ng larawan. Kinakailangan ang katangiang ito para sa lahat ng larawan sa isang web page, at pinapayagan nito ang browser na hanapin at ipakita ang larawan.
Paano ako magdagdag ng panlabas na larawan sa HTML
Ang pagdaragdag ng panlabas na imahe sa HTML ay medyo simple. Ang kailangan mo lang gawin ay gamitin ang tag at tukuyin ang pinagmulan ng larawan gamit ang src attribute. Ang syntax para sa pagdaragdag ng panlabas na larawan sa HTML ay ganito ang hitsura:
Kung saan ang "image_url" ay isang link sa file ng larawan, at ang "alternatibong teksto" ay isang paglalarawan ng kung ano ang nasa larawan (para sa mga layunin ng accessibility).
Halimbawa, kung gusto mong magdagdag ng panlabas na larawan mula sa iyong website na tinatawag na my-image.jpg, magiging ganito ang hitsura ng iyong code:
