Ho qualche problema con le mie immagini sul mio progetto di reazione. In effetti ho sempre pensato che il percorso relativo nell'attributo src fosse costruito sull'architettura dei file

Ecco la mia architettura di file:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Tuttavia mi sono reso conto che il percorso è costruito sull'URL. In uno dei miei componenti (ad esempio in file1.jsx) ho questo:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Come è possibile risolvere questo problema? Voglio che in qualsiasi forma di percorsi gestiti da reazioni-router, tutte le immagini possano essere visualizzate con lo stesso percorso.

Stai utilizzando un URL relativo, che è relativo all'URL corrente, non al file system. È possibile risolvere questo problema utilizzando URL assoluti

<img src ="http://localhost:3000/details/img/myImage.png" />

Ma non è eccezionale quando si esegue la distribuzione su www.my-domain.bike o su qualsiasi altro sito. Meglio sarebbe usare un url relativo alla directory principale del sito

<img src="/details/img/myImage.png" />

In create-react-apppercorsi relativi per le immagini non sembrano funzionare. Invece, puoi importare un'immagine:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Se hai utilizzato create -eagire-app per creare il tuo progetto, la tua cartella pubblica è accessibile. Quindi è necessario aggiungere la imagecartella all'interno della cartella pubblica.

pubblico / images /

<img src="/images/logo.png" />

Con create-react-appc'è la cartella pubblica (con index.html ...). Se inserisci "myImage.png" lì, ad esempio nella sottocartella img , puoi accedervi tramite:

<img src={window.location.origin + '/img/myImage.png'} />

1. Crea una cartella di immagini all'interno di src (/ src / images) e mantieni la tua immagine al suo interno. Quindi importa questa immagine nel tuo componente (usa il tuo percorso relativo). Come sotto

   import imageSrc from './images/image-name.jpg';

   E poi nel tuo componente.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Un altro modo è quello di mantenere le immagini nella cartella pubblica e importarle usando il percorso relativo. Per questo crea una cartella di immagini in una cartella pubblica e tieni l'immagine in essa. E poi nel tuo componente usalo come di seguito.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Entrambi i metodi funzionano, ma il primo è raccomandato perché il suo modo più pulito e le immagini sono gestite dal webpack durante il tempo di costruzione.

nel mio caso funziona anche il seguente codice.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Alcune risposte più vecchie non funzionano, altre sono buone ma non spiegano il tema, in sintesi:

Se l'immagine è nella directory "pubblica"

Esempio: \public\charts\a.png

In html:

<img id="imglogo" src="/charts/logo.svg" />

In JavaScript:

Crea un'immagine in new img, in modo dinamico:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Imposta l'immagine su img esistente con id come 'img1', in modo dinamico:

document.getElementById('img1').src = 'charts/a.png';

Se l'immagine è nella directory 'src':

Esempio: \src\logo.svg

In JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

In jsx:

<img src={logo} /> 

Aggiunta di npm del caricatore di file a webpack.config.js secondo le sue istruzioni di utilizzo ufficiali in questo modo:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

ha funzionato per me.

Importa immagini nel tuo componente

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

E chiama il nome dell'immagine su image src = {RecentProjectImage_3} come oggetto

 <Img src={RecentProjectImage_3} alt="" />

Un amico mi ha mostrato come fare come segue:

"./" funziona quando il file che richiede l'immagine (ad es. "esempio.js") si trova sullo stesso livello all'interno della struttura ad albero della cartella della cartella "immagini".

Posiziona il logo nella tua cartella pubblica sotto ad esempio public / img / logo.png e quindi fai riferimento alla cartella pubblica come% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

L'uso di% PUBLIC_URL% in precedenza verrà sostituito con l'URL della publiccartella durante la compilazione. Solo i file all'interno della publiccartella possono essere referenziati dall'HTML.

A differenza di "/img/logo.png" o "logo.png", "% PUBLIC_URL% / img / logo.png" funzionerà correttamente sia con il routing lato client che con un URL pubblico non root. Scopri come configurare un URL pubblico non root eseguendolo npm run build.