كيف أستعمل موقع placeholder للحصول على الصور؟
في هذا المقال الجديد سنتعرف على موقع جد رائع
أولا لا تملك صورا لتعلم إختبار لصور على موقعك و ستضطر إلى الذهاب إلى جوجل أو فايسبوك للبحث عن الصورة المطلوبة و
هذا سيكون مرهق وأنت تريد فقط تعمل test الموقع الخاص بك أو حتي في مرحلة التعلم تريد صورة لتّعلم منها و تجربتها.
الحل هو أن تكتب فقط رابط الموقع بهذا الشكل
https://via.placeholder.com/
طبعا ستكتبه في خاصية src الموجودة في وسم img أولا تحديد عرض الصورة سنكتب هكذا
https://via.placeholder.com/200x300
بعد السلاش نكتب العرض والإرتفاع الخاص بالصور يمكنك كتابة أي عرض أو أرتفاع تريده و ستضهر معك الصورة في المتصفح
بنفس العرض والإرتفاع الذي حددته.
والآن نريد التحكم في الألوان مثلا خلفية الصورة و لون النص الذي سنتعرف على طريقة إضافة.
نكتب بهذا الشكل :
https://via.placeholder.com/200x300/F00/080
أعتقد سيكون لون الخلفية بالأحمر ولون النص الذي سنتعرف عليه الآن سيصبح باللون الأخطر
طريقة إضافة نص مع اللون الخاص به نضع بعد 080 النص الذي سيتلون بهذا اللون هكذا
https://via.placeholder.com/200x300/F00/080?text=Ayoub
لإضافة أكثر من نص نضع علامة +
https://via.placeholder.com/200x300/F00/080?text=Ayoub+Ayaou
تحدير لا تعمل مسافة في الرابط لإضافة أكثر من سطر تستعمل علامة + لأنك ستخرب الرابط ولن يعمل.
الآن ستكون النتيجة بهذا الشكل في كود html
<img src="https://via.placeholder.com/200x300/F00/080?text=Ayoub+Ayaou" alt="this is test img">
الرابط الخاص بنا
https://via.placeholder.com/200x300/F00/080?text=Ayoub+Ayaou
أتمني أن يعجبكم المقال وأعتدر إن قلت أي معلومة خطأ المهم توصل الفكرة يوجد الكثير من المواقع غيره تأدي نفس
الوظيفة وشكرا لكم