הצגת תמונה ב-React

תמלול ההרצאה: הצגת תמונה ב-React

הטקסט המלא של הדקות הראשונות בהרצאה «הצגת תמונה ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אנחנו עוברים ליכולת הבאה של ריאקט לבייסיק שאנחנו יכולים לעשות בריאקט וזה הצגה של תמונות. איך אנחנו בעצם מציגים תמונות בקומפוננטת ריאקט?

2. 00:17

   לצורך כך בואו נגיד שאנחנו רוצים להציג באתר שלנו כאן את הלוגו של החברה של נורפווינד. אז בואו נייצר לעצמנו איזושהי קומפוננטה חדשה אבל לא נשים אותה בתוך ה-Home, נשים אותה בתוך ה-Layout.

3. 00:41

   נגדיר שהקומפוננטה הזאת נקראת לוגו, בואו נלחץ Enter, ובתוך ה-Layout אמור להיות לנו לוגו. מעולה.

4. 00:53

   עכשיו, כאן אנחנו רוצים שתהיה לנו איזושהי תמונה IMG, ואנחנו רוצים שיהיה לה איזשהו SRC, Source Code, Source Image הכוונה.

5. 01:08

   איך אנחנו מגדירים תמונה? אז קודם כל, אנחנו רואים שהוא כבר צועק עליי, src אמור להכיל ערך, אני אשים את זה רגע בהערה.

6. 01:16

   הדבר הראשון, איפה אנחנו מגדירים את התמונות שלנו, איפה אנחנו מכילים אותן. אז מה שמקובל לעשות בפרויקט ריאקט זה שבתוך ה src אנחנו יוצרים תיקייה שנקראת assets וכל ה assets שיש לנו, כל ה assets הכוונה משאבים שאנחנו משתמשים איתם כמו אייקונים, גופנים,

7. 01:43

   סרטונים, תמונות, הכל נמצא בתוך האסץ. אנחנו רוצים להשתמש בתמונות, אז בתוך האסץ נבנה תיקייה שנקראת Images והיא תכיל את כל התמונות. בנוסף, באסץ אולי יהיה לנו תיקייה שנקראת Fonts עבור הגופנים או Video עבור הסרטונים ויש לנו כרגע Images.

8. 02:05

   יש לנו פה תמונה של הלוגו האמיתי של חברת Northwind. ככה הלוגו הזה נראה Northwind Therades בעצם זה השם המקצועי שלהם ונעביר אותה לפה, אפשר את זה למחוק, חזור, יש לנו תמונה.

9. 02:29

   עכשיו, בכדי להשתמש בתמונה שנמצאת אנחנו צריכים לעשות לה אימפורט. אני ממציא לה שם, נקרא לתמונה לוגו אימג' ומה המיקום היחסי שלה.

10. 02:47

    אז אנחנו נמצאים כאן בתיקייה הזאת, אז בואו נתחיל להעלות תיקייה אחת למעלה ואני רואה שהוא כבר מציע לי הצעות ואנחנו עדיין צריכים להמשיך לעלות למעלה ועדיין לעלות למעלה, עד שאני אראה את אקיאת אסטס נכנס לתוך אסטס, לתוך אסטס אני נכנס לתוך אימג'ז, ובתוך אימג'ז אנחנו רוצים את לוגו נקודה JPEG,

11. 03:14

    זה בעצם הסיומת של התמונה, והנה אנחנו רואים שהוא מצא אותה, אם הייתי סתם שם פה שם אחר אני רואה שהוא לא מוצא את זה ונותן לי על זה שגיאה.

12. 03:24

    עכשיו אנחנו יכולים לקחת את התמונה הזאת, ללכת ל-SRC, אנחנו מכניסים אותה כ-interpolation, לוגו image בצורה כזאת. זהו, עד כדי כך, זה פשוט.

13. 03:39

    בואו רגע קודם כל נציב אותה במקום שלה, ואנחנו רוצים האמת להציב אותה ב-header, נראה לי זה יהיה מקום טוב. אז בואו ניגש לכאן ונגדיר שאנחנו רוצים את הלוגו, הנה הוא פה, יש לנו פה את ה-import שלו, וכמובן אנחנו נצטרך להוסיף CSS, זה לא ייראה טוב כרגע, זה בטח ייראה גדול מאוד,

14. 04:13

    הנה הוא כאן. אז בואו נוסיף css טיפה, זה אמור להיות פה, רגע נציג את שניהם ביחד, נשים את זה בצד, נגדיר שאנחנו רוצים רק בוא נניח 10% מההייט המקורי, נגדיר שאנחנו רוצים שיהיה קצת 0.3 פיקסלים על 0, בואו נגדיר לבורדר שיהיה יפה כזה,

15. 04:52

    Solid Black, בואו נגדיר Position Fix, הוא תמיד יהיה מקובע לשמאל של הדף,