Δεν είναι δυνατή η εύρεση εικόνων με βάση τη διεύθυνση URL στο React

Εάν είστε νέοι στο React και αντιμετωπίζετε προβλήματα με την πρόσβαση σε εικόνες που είναι αποθηκευμένες τοπικά, δεν είστε μόνοι.

Φανταστείτε ότι έχετε αποθηκεύσει τις εικόνες σας σε έναν κατάλογο δίπλα σε ένα στοιχείο όπως αυτό:

/src /components - component1 - component2 /img - img1 - img2

Και προσπαθείτε να αποκτήσετε πρόσβαση στις εικόνες στον /imgκατάλογο από component2:

import React, { Component, useState, useEffect } from 'react'; import { render } from 'react-dom' import { useTransition, animated, config } from "react-spring"; import imgArr from './images'; import '../App.css'; const Slideshow = () => { const [index, set] = useState(0) const transitions = useTransition(imgArr[index], item => item.id, { from: { opacity: 0 }, enter: {opacity: 1 }, leave: { opacity: 0 }, config: config.molasses, }) useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), []) return transitions.map(({ item, props, key }) => (    )) } const slideshowContainerStyle = { width: '80%', height: '300px' } export default Slideshow; 

Έχετε δοκιμάσει τα μονοπάτια ../img/img1.jpgκαι ..img/img1.jpg, αλλά πάρτε Error: Cannot find module ''.

Τι συμβαίνει εδώ;

Λίγο περίπου create-react-app

Όπως και οι περισσότεροι άνθρωποι, πιθανότατα create-react-appσυνηθίζατε να κάνετε bootstrap στο έργο σας.

Σε αυτήν την περίπτωση, η χρήση σχετικών διαδρομών μπορεί να είναι λίγο δύσκολη επειδή create-react-appδημιουργεί τα αρχεία HTML, CSS και JavaScript σε ένα φάκελο εξόδου:

/public - index.html - bundle.js - style.css

Υπάρχουν διάφοροι τρόποι για να χρησιμοποιήσετε εικόνες create-react-app, αλλά ένας από τους ευκολότερους είναι να συμπεριλάβετε τις εικόνες σας /public. Όταν δημιουργείται το έργο σας, /publicχρησιμεύει ως ριζικός κατάλογος.

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

Εισαγωγή εικόνων

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

Η εισαγωγή είναι χρήσιμη όταν το στοιχείο σας, σε αυτήν την περίπτωση μια εικόνα, βρίσκεται στον ίδιο κατάλογο ή κοντά στο στοιχείο που το χρησιμοποιεί και δεν θα χρησιμοποιηθεί πουθενά αλλού. Για παράδειγμα, εάν έχετε ένα στοιχείο εισόδου με κουμπιά που χρησιμοποιούν SVG για εικονίδια αντίχειρα προς τα πάνω και αντίχειρες προς τα κάτω.

Λίγο πλεονέκτημα της χρήσης importείναι ότι θα ρίξει ένα σφάλμα κατά τη διάρκεια της κατασκευής, εάν υπάρχει τυπογραφικό λάθος. Αυτού του είδους ο έλεγχος διασφαλίζει ότι οι χρήστες δεν θα βλέπουν μια σπασμένη εικόνα.