Εισαγωγή

Κατά την ανάπτυξη εφαρμογών ιστού με το React, συνήθως θέλουμε να συμπεριλάβουμε οπτικά στοιχεία για να προσελκύσουμε το ενδιαφέρον των χρηστών. Αυτά τα οπτικά στοιχεία θα μπορούσαν να είναι οποιοσδήποτε τύπος εικόνας, συμπεριλαμβανομένων των JPG, PNG, SVG, GIF και πολλών άλλων.

Σε αυτό το άρθρο, θα μάθουμε πώς να εισάγουμε εικόνες με το React και θα δούμε τους διάφορους τρόπους με τους οποίους θα μπορούσε να επιτευχθεί αυτό.

Οι εξωτερικές εικόνες και οι τοπικές εικόνες είναι οι δύο τύποι εικόνων που θέλουμε να χρησιμοποιήσουμε στην εφαρμογή React. Μας απασχολούν κυρίως τοπικές εικόνες σε αυτό το άρθρο, επειδή οι εξωτερικές εικόνες δεν απαιτούν την εισαγωγή τους.

Οι εξωτερικές εικόνες είναι εικόνες που έχουν ήδη φιλοξενηθεί εξωτερικά και είναι προσβάσιμες από οποιονδήποτε μέσω μιας διεύθυνσης URL, ενώ οι τοπικές εικόνες είναι εικόνες που είναι διαθέσιμες σε εμάς μόνο στον τοπικό μας υπολογιστή ή στο φάκελο του έργου και που θέλουμε να χρησιμοποιήσουμε στην εφαρμογή μας.

Τρόπος εμφάνισης εικόνων που φιλοξενούνται εξωτερικά

Πριν ασχοληθούμε με τον τρόπο εισαγωγής εικόνων, είναι σημαντικό να κατανοήσουμε ότι οι εικόνες που φιλοξενούνται αλλού λειτουργούν με τον ίδιο τρόπο που χρησιμοποιούσαμε πάντα τις εικόνες σε HTML – προσθέτοντας τη διεύθυνση URL στο 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 Η δήλωση είναι η πιο συχνά χρησιμοποιούμενη μέθοδος για την εισαγωγή τοπικά αποθηκευμένων εικόνων στο React. Οι εικόνες αντιμετωπίζονται ως προεπιλεγμένες εξαγωγές, και όταν τα εισάγουμε, το κάνουμε με τον ίδιο τρόπο που εισάγουμε στοιχεία. Αυτό γίνεται καθορίζοντας τη σχετική διαδρομή από το αρχείο στην εικόνα που εισάγουμε:

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

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

Στον παραπάνω κώδικα, εξακολουθούμε να χρησιμοποιούμε το img ετικέτα και src χαρακτηριστικό, αλλά αυτή τη φορά το src Το χαρακτηριστικό λαμβάνει μια μεταβλητή αντί για μια συμβολοσειρά, η οποία μεταβιβάζεται χρησιμοποιώντας σγουρά άγκιστρα στο JSX.

Σημείωση: Μπορούμε να εισαγάγουμε όσες εικόνες θέλουμε, αλλά κάθε εικόνα πρέπει να έχει ένα μοναδικό όνομα στη δήλωση εισαγωγής, διαφορετικά θα προκαλέσει σφάλμα.

Είναι σημαντικό να κατανοήσετε πώς να καθορίσετε και να αποκτήσετε σχετικές διαδρομές για αρχεία. Διαφορετικά, ενδέχεται να προκύψουν σφάλματα και σφάλματα. Στο προηγούμενο παράδειγμα, η εικόνα αποθηκεύτηκε σε ένα /src/images.

Πώς να εισαγάγετε εικόνες με το React χρησιμοποιώντας τη συνάρτηση require().

Η require() Η συνάρτηση είναι μια συνάρτηση 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() λειτουργία σε αυτό το άρθρο.