خصائص src لـ HTML <img>

HTML <img> العلامة

تعريف ووظيفة

مطلوب src خصائص URL للصورة

هناك طريقتان يمكن استخدامها لتحديد URL الخاصية. src تحديد URL في الخاصية:

1. URL مطلقة - رابط إلى صورة مخزنة في موقع آخر. على سبيل المثال:

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

ملاحظة:صور خارجية قد تكون محمية بموجب حقوق النسخ. إذا لم تحصل على إذن باستخدامها، قد تنتهك حقوق النسخ. بالإضافة إلى ذلك، لا يمكنك التحكم في صور خارجية؛ قد يتم إزالتها أو تعديلها فجأة.

2. URL مطلقة - رابط إلى الصورة المضمنة في الموقع.

في هذا السياق، لا يشمل URL اسم النطاق. إذا لم يبدأ URL بالشرطة المائلة، فإنه سيكون مطلقًا بالنسبة للصفحة الحالية. على سبيل المثال:

src="img_girl.jpg".

إذا كانت URL تبدأ بشرطة مائلة، فإنها ستكون مطلقة بالنسبة للنطاق. على سبيل المثال:

src="/images/img_girl.jpg".

نصيحة:من الأفضل استخدام URLs مطلقة. إذا قمت بتغيير اسم النطاق، لن يتم إنشاء روابط معطوبة.

ملاحظة:إذا لم يجد المتصفح الصورة، سيظهر رمز رابط معطوب و نص alt.

نصيحة:من أجل تنظيم تخزين الوثائق، يفضل المبدعون وضع ملفات الصور في مجلد منفرد، وعادة ما يتم تسمية هذه الدلائل بأسماء مثل "pics" أو "images". في تعليمات CodeW3C.com عبر الإنترنت، وضع مهندسونا معظم الصور المستخدمة في مجلد يُدعى "i"، وهو اختصار لـ "images"، مما يوفر أقصى تعقيد في المسار.

مثال

في المثال التالي، قمنا بتعديل الصفحة لاستخدام صورة ليليوم من قبل مهندسي 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 نسبي - يشير إلى موقع آخر (مثل src="http://www.example.com/image.gif")
  • URL مطلق - يشير إلى ملف داخل الموقع (مثل src="image.gif")

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

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

HTML <img> العلامة