Percorso corretto per img su React.js

Ho qualche problema con le mie immagini sul mio progetto di risposta. In realtà ho sempre pensato che il percorso relativo in attributo src è stato costruito sull'architettura filePercorso corretto per img su React.js

Ecco la mia architettura file:

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

però mi sono reso conto che il percorso è stato costruito su l'url. In uno dei miei componente (per 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 works, images are not displayed

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

fonte

2016-06-05 onedkr

basta puntare direttamente all'immagine, non usare ../ qualunque sia – JordanHendrix

Si sta utilizzando un url relativo, che è relativo all'url corrente, non al file system. Si potrebbe risolvere questo utilizzando URL assoluti

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

Ma non è grande per quando si distribuisce a www.my-domain.bike, o qualsiasi altro sito. Meglio sarebbe quella di utilizzare un URL relativo alla directory principale del sito

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

fonte

2016-06-05 16:48:13 prekolna

Grazie, vorrei sottolineare il '/' che precede 'details' (vs'./Details', etc, per gli altri che potrebbero confondere i due). – user1322092

Non capisco perché sia così difficile mostrare le immagini nelle app reactjs. Ad ogni modo questa soluzione non funziona per me. – santafebound

102

Non cercando di rispondere alla domanda - solo una nota che nel creare-reagiscono-app, i percorsi relativi per le immagini non sembrano lavorare. 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"}/> 
     ) 
    } 
}

fonte

2016-10-09 17:24:09 claireablani

E per quanto riguarda le immagini dinamiche, ad esempio, referenziate in un file JSON, in create-react-app? – zok

@zok Penso che dovresti esportare la variabile dal file JSON, importare la variabile nel tuo componente. Quindi puoi fare riferimento come al solito. per esempio. export const my_src = variable_here, import {my_src} da my_file e src = {my_src}. – claireablani

'import './styles/style.less'; ** Importa logo da './styles/images/deadline.png'; ** 'Ricevo l'errore sul modulo di seconda linea non trovato mentre l'immagine esiste e il percorso è corretto. – Hitendra

Se è stato utilizzato creare-reagiscono-app per creare il progetto allora la vostra cartella pubblica è accessibile. Quindi è necessario aggiungere la cartella image all'interno della cartella pubblica.

fonte

2017-12-30 21:03:36

Un amico mi ha mostrato come fare questo nel modo seguente:

"./" funziona quando il file che richiede l'immagine (ad esempio, 'example.js') è sullo stesso livello all'interno del struttura ad albero delle cartelle come cartella "images".

fonte

2018-03-04 01:49:58 AdamJSim

Con create-react-app c'è cartella pubblica (con index.html ...). Se si posiziona il "myImage.png" là, dire sotto img sotto-cartella, quindi è possibile accedervi attraverso:

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

fonte

2018-03-08 10:10:53

dovrebbe essere fatto qualcosa di simile:

<img id = "profile_image" src= { require('../images/' + 
this.state.fileName) } height="100px" width="100px" />

Require ti aiuta a recuperare le immagini.

fonte

2018-03-09 03:47:40

Percorso corretto per img su React.js

risposta

Problemi correlati