Introduksjon
Når vi utvikler webapplikasjoner med React, ønsker vi vanligvis å inkludere visuelle elementer for å fange brukernes interesse. Disse visuelle elementene kan være alle typer bilder, inkludert JPG-er, PNG-er, SVG-er, GIF-er og mange andre.
I denne artikkelen vil vi lære hvordan du importerer bilder med React og se de ulike måtene dette kan oppnås på.
Eksterne bilder og lokale bilder er de to typene bilder vi ønsker å bruke i vår React-applikasjon. Vi er først og fremst opptatt av lokale bilder i denne artikkelen fordi eksterne bilder ikke krever at vi importerer dem.
Eksterne bilder er bilder som allerede er lagret eksternt og kan nås av alle via en URL, mens lokale bilder er bilder som kun er tilgjengelige for oss på vår lokale datamaskin eller prosjektmappe og som vi ønsker å bruke i applikasjonen vår.
Hvordan vise bilder som hostes eksternt
Før vi går inn på hvordan du importerer bilder, er det viktig å forstå at bilder som er vert andre steder fungerer på samme måte som vi alltid har brukt bilder i HTML – ved å legge til URL-en til src attributtet til img stikkord:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
La oss nå lære hvordan vi kan importere (lokale) bilder med React!
Slik importerer du bilder med React
Bortsett fra de eksterne bildene, er måten bildene brukes på i React vesentlig forskjellig fra andre rammeverk eller til og med HTML. Disse bildene må først importeres til React før de kan brukes i vår applikasjon.
Dette kan oppnås på to måter: ved å bruke import uttalelse eller ved å bruke require() funksjon. Vi vil gå gjennom begge tilnærmingene.
Slik importerer du bilder med React ved å bruke importere Uttalelse
Fordi det er lettere å lese og forstå import statement er den mest brukte metoden for å importere lokalt lagrede bilder i React. Bildene behandles som standard eksporter, og når vi importerer dem, gjør vi det på samme måte som vi importerer komponenter. Dette gjøres ved å spesifisere den relative banen fra filen til bildet vi importerer:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
I koden ovenfor bruker vi fortsatt img tag og src attributt, men denne gangen src attributt mottar en variabel i stedet for en streng, som sendes med krøllete klammeparenteser i JSX.
OBS: Vi kan importere så mange bilder vi vil, men hvert bilde må ha et unikt navn i importsetningen, ellers vil det gi en feil.
Det er viktig å forstå hvordan du spesifiserer og får relative stier for filer; ellers kan det oppstå feil og feil. I det foregående eksempelet ble bildet lagret i en /src/images.
Slik importerer du bilder med React ved å bruke require()-funksjonen
De require() funksjon er en Node.js-funksjon som brukes til å inkludere eksterne moduler fra andre filer enn den gjeldende filen. Det fungerer på samme måte som import uttalelse og lar oss inkludere bilder:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Den eneste forskjellen er den første linjen der vi krevde bildet via dens relative bane og deretter lagret det i en variabel som vi fikk tilgang til i img tag via krøllete seler.
Vi kan også bestemme oss for å gjøre dette inline og unngå den ekstra linjen som brukes til å tilordne bildet til en variabel, siden det ikke er obligatorisk:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
konklusjonen
Vi lærte hvordan du importerer lokale bilder ved hjelp av import uttalelse og require() funksjon i denne artikkelen.
