ייבוא ​​תמונות עם React

מבוא

כאשר מפתחים אפליקציות אינטרנט עם React, אנו בדרך כלל רוצים לכלול אלמנטים ויזואליים כדי ללכוד את העניין של המשתמשים. אלמנטים חזותיים אלה יכולים להיות כל סוג של תמונה, כולל JPG, PNG, SVG, GIF ועוד רבים אחרים.

במאמר זה, נלמד כיצד לייבא תמונות עם React ונראה את הדרכים השונות שניתן להשיג זאת.

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

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

כיצד להציג תמונות שמתארחות חיצונית

לפני שניכנס לאופן ייבוא ​​תמונות, חשוב להבין שתמונות שמתארחות במקום אחר פועלות באותו אופן שבו תמיד השתמשנו בתמונות ב-HTML - על ידי הוספת כתובת האתר ל- src תכונה של img תג:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

עכשיו נלמד כיצד אנו יכולים לייבא תמונות (מקומיות) עם React!

כיצד לייבא תמונות עם React

מלבד התמונות החיצוניות, אופן השימוש בתמונות ב-React שונה באופן משמעותי מזה של מסגרות אחרות או אפילו HTML. תחילה יש לייבא את התמונות הללו אל React לפני שניתן יהיה להשתמש בהן באפליקציה שלנו.

ניתן להשיג זאת בשתי דרכים: באמצעות ה import הצהרה או באמצעות ה require() פוּנקצִיָה. נעבור על שתי הגישות.

כיצד לייבא תמונות עם React באמצעות ה לייבא הצהרה

מכיוון שקל יותר לקרוא ולהבין, ה import statement היא השיטה הנפוצה ביותר לייבוא ​​תמונות המאוחסנות מקומית ב-React. התמונות מטופלות כאל יצוא ברירת מחדל, וכאשר אנו מייבאים אותם, אנו עושים זאת באותו אופן שבו אנו מייבאים רכיבים. זה נעשה על ידי ציון הנתיב היחסי מהקובץ לתמונה שאנו מייבאים:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

בקוד למעלה, אנו עדיין משתמשים ב- img תג ו src תכונה, אבל הפעם ה src attribute מקבל משתנה ולא מחרוזת, אשר מועבר באמצעות סוגרים מסולסלים ב-JSX.

הערה: אנחנו יכולים לייבא כמה תמונות שנרצה, אבל לכל תמונה חייבת להיות שם ייחודי בהצהרת הייבוא, אחרת היא תגרום לשגיאה.

חשוב להבין כיצד לציין ולהשיג נתיבים יחסיים לקבצים; אחרת, באגים ושגיאות עלולים להתרחש. בדוגמה הקודמת, התמונה נשמרה ב-an /src/images.

כיצד לייבא תמונות עם React באמצעות הפונקציה require()

אל האני require() function היא פונקציית Node.js המשמשת לכלול מודולים חיצוניים מקבצים שאינם הקובץ הנוכחי. זה עובד באותו אופן כמו ה import הצהרה ומאפשרת לנו לכלול תמונות:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

ההבדל היחיד הוא השורה הראשונה שבה דרשנו את התמונה דרך הנתיב היחסי שלה ואז אחסנו אותה במשתנה שאליו ניגשנו ב- img תיוג באמצעות פלטה מתולתלת.

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

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

סיכום

למדנו כיצד לייבא תמונות מקומיות באמצעות ה import הצהרה ו require() פונקציה במאמר זה.