علامة <img> HTML

التعريف والاستخدام

<img> علامة تستخدم لتحميل الصور في صفحة HTML.

技术上، لا يتم إدراج الصورة في الصفحة، بل يتم ربطها بالصفحة.<img> علامة تخلق مكونًا يستخدم لتوجيه الصورة.

<img> العلامة تحتوي على خصائص ضرورية اثنين:

  • src - تحديد مسار الصورة
  • alt - إذا لم يتمكن من عرض الصورة لأي سبب من الأسباب، يجب تحديد نص البديل للصورة

ملاحظة:إضافة إلى ذلك، يجب دائمًا تحديد عرض الصورة وارتفاعها. إذا لم يتم تحديد العرض والارتفاع، قد ي闪烁 الصفحة عند تحميل الصورة.

نصيحة:لرابط الصورة إلى مستند آخر، يكفي فقط ربط العلامة <img> تغليف العلامة داخل <a> داخل العلامة (يرجى الرجوع إلى المثال أدناه).

يرجى الرجوع إلى:

دليل HTML:صورة HTML

دليل DOM HTML:مفهوم الصورة

دليل CSS:تعيين أنماط الصورة

قراءة متعمقة:كيفية استخدام الصورة بشكل صحيح

مثال

مثال 1

في المثال التالي، قمنا بإدراج صورة لزهور التوليب التي صورتها م инженار CodeW3C.com في مستودع الزهور في شانغهاي:

<img src="tulip.jpg" alt="مستودع الزهور في شانغهاي - التوليب" />

جرب بنفسك

مدينة الزهور شانغهاي - التوليب

مثال 2

مثال آخر على كيفية إدراج الصورة:

<img src="dancer.png" alt="رقص" width="500" height="749">

جرب بنفسك

نصيحة:يقدم المزيد من الأمثلة في قاعدة الصفحة السفلية.

الخصائص

الخصائص القيمة الوصف
alt النص تحديد النص البديل للصورة.
crossorigin
  • anonymous
  • use-credentials
 السماح باستخدام الصور من مواقع الطرف الثالث التي تسمح بالوصول عبر الحدود مع استخدام الرسوم البيانية (canvas).
height بكسل تحديد طول الصورة.
ismap ismap تعريف الصورة كصورة خريطة على الجانب السervoبي.
loading
  • eager
  • lazy
 تحديد ما إذا كان يجب على المتصفح تحميل الصورة على الفور أم تأجيل تحميلها حتى ت满足了 بعض الشروط.
longdesc URL تحديد URL يشير إلى وصف مفصل للصورة.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 تحديد المعلومات المرجعية التي يجب استخدامها عند الحصول على الصورة.
sizes الحجم تحديد حجم الصورة للمساحات المختلفة للصفحات.
src URL تحديد مسار الصورة.
srcset URL-list تحديد قائمة ملفات الصور التي يتم استخدامها في مختلف الحالات.
usemap #mapname تعريف الصورة كصورة على الجهاز الكمبيوتر.
width بكسل تحديد عرض الصورة.

خصائص العالمية

<img> الدوال تدعم خصائص العالمية في HTML。

خصائص الحدث

<img> الدوال تدعم خصائص الحدث في HTML。

مزيد من الأمثلة

مثال 3

تثبيت الصورة (باستخدام CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

جرب بنفسك

مثال 4

إضافة حواف للصورة (باستخدام CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

جرب بنفسك

مثال 5

إضافة الهوامش الجانبية للصورة (باستخدام CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

جرب بنفسك

مثال 6

إضافة الهوامش العلوية والسفلية والخارجية للصورة (باستخدام CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

جرب بنفسك

مثال 7

كيفية إدراج الصورة من مجلد آخر أو من موقع آخر:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

جرب بنفسك

مثال 8

كيفية إضافة رابط إلى الصورة:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

جرب بنفسك

مثال 9

كيفية إنشاء خريطة صورة تحتوي على مناطق قابلة للنقر. كل منطقة هي رابط:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

جرب بنفسك

قراءة متعمقة - كيفية استخدام الصور بشكل صحيح

واحدة من أكثر خصائص HTML و XHTML إثارة، هو القدرة على تضمين الصور في النص الوثيقة، سواء كجزء من وثيقة (صورة مدمجة) أو كوثيقة منفصلة يمكن تنزيلها عبر رابط أو كجزء من خلفية الوثيقة.

إضافة الصور بشكل معقول إلى محتويات الوثيقة (الرموز المتحركة أو الصور أو الشروحات أو الرسومات، وما إلى ذلك) يجعل الوثيقة أكثر حيوية وجاذبية، ويبدو أكثر专业性، ويكون أكثر معلوماتية وسهولة في الاستخدام. يمكن أيضًا جعل صورة واحدة مرشدة بصريًا لتكون رابطًا مرئيًا.

مع ذلك، إذا تم استخدام الصور بشكل مفرط، فإن الوثيقة ستتحول إلى كومة من القطع، ستكون فوضوية وغير قابلة للقراءة، مما يزيد من وقت الانتظار غير الضروري للنقر على الصفحة والعرض

يرجى قراءة المقالة التالية لمعرفة الصيغتين الرئيسيتين للصور على الإنترنت: GIF و JPEG، وكيفية استخدام الصور بشكل صحيح:

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية <img> العنصر:

img {
  display: inline-block;
}

جرب بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم