ویژگی <img> src HTML

برچسب <img> HTML

تعریف و استفاده

ضروری src ویژگی تعیین URL تصویر

دو روش برای مشخص کردن URL تصویر وجود دارد: src URL را در ویژگی مشخص کنید:

1. URL‌های مطلق - به تصاویری که در وب‌سایت‌های دیگر میزبانی می‌شوند، لینک می‌دهند. به عنوان مثال:

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

توجه:تصاویر خارجی ممکن است تحت قانون کپی‌رایت قرار داشته باشند. اگر مجوز استفاده از آن‌ها را ندارید، ممکن است به قانون کپی‌رایت نقض کنید. علاوه بر این، شما نمی‌توانید کنترل تصاویر خارجی را داشته باشید؛ ممکن است ناگهان حذف شوند یا تغییر کنند.

2. URL‌های نسبی - به تصاویری که در وب‌سایت داخلی میزبانی می‌شوند، لینک می‌دهند.

در اینجا، URL شامل دامنه نیست. اگر URL با یک خط تیرگی شروع نشود، آن URL به صفحه فعلی مربوط می‌شود. به عنوان مثال:

src="img_girl.jpg".

اگر URL با یک خط تیرگی شروع شود، آن URL به دامنه مربوط می‌شود. به عنوان مثال:

src="/images/img_girl.jpg".

توجه:بهترین کار استفاده از URL‌های نسبی است. اگر دامنه را تغییر دهید، هیچ لینک شکسته‌ای ایجاد نمی‌شود.

توجه:اگر مرورگر نمی‌تواند تصویر را پیدا کند، نماد لینک خراب و متن alt نمایش داده می‌شود.

توجه:برای سازماندهی ذخیره‌سازی مستندات، سازنده معمولاً فایل‌های تصویری را در یک پوشه جداگانه قرار می‌دهد و معمولاً این پوشه‌ها را به نام‌هایی مانند "pics" یا "images" نامگذاری می‌کند. در آموزش‌های آنلاین CodeW3C.com، مهندسان ما بیشتر تصاویر معمول را در یک پوشه به نام "i" ذخیره می‌کنند که مخفف "images" است. این کار مزایای زیادی دارد و می‌تواند مسیرها را تا حد زیادی ساده کند.

مثال

در مثال زیر، ما در صفحه یک تصویر از تtulip که توسط مهندسان CodeW3C.com در پارک گل‌های شانگهای گرفته شده است، قرار دادیم. نام فایل تصویر "eg_tulip.jpg" است و در پوشه "i" سرور ذخیره شده است. این کد منبع است:

<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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

برچسب <img> HTML