[ReactJS] importare immagini

[Alhazred]

Sto imparando ad usare ReactJS e mi esercito convertendo una webapp che ho realizzato qualche tempo fa.

In una pagina ho una timeline le cui righe iniziano con un'icona che descrive visivamente l'attività relativa.
In totale ho 27 possibili attività, quindi 27 icone, ma non tutte vengono usate all'interno di una determinata timeline.

L'unico sistema che ho visto fin'ora è quello di importare TUTTE le immagini, una per una con
import mountain from '../assets/img/icons/mountain_icon.png';
import museum from '../assets/img/icons/museum_icon.png';
ecc...
all'inizio del componente

poi nella funzione render() usando il nome dell'icona in modo "hardcoded"
<img src={museum} .../>

funziona, {museum} viene rimpiazzato con l'icona da mostrare, ma ci sono 2 problemi:
1) mettere 27 import all'inizio del file, compresi quelli per immagini che non saranno usate, mi pare un grande spreco
2) l'immagine da inserire non la so a priori, ma il suo nome è contenuto in un array sul quale ciclo per generare le varie attività ed usando il contenuto dell'array non funziona

Non usando un nome hardcoded faccio in questo modo

<img src={this.props.activity.action_icon} ... />

this.props.activity.action_icon contiene il nome giusto, quindi mountain, museum... ma così facendo non viene richiamata l'immagine, ispezionando il codice HTML della pagina generata leggo esattamente
<img src={museum} ... />

Come si procede in un caso simile?

[M4V1]

Anche io sto facendo una cosa simile, visto che gli import dinamici non funzionano e bisogna fare dei giri un po' strani che non mi piacevano, ho optato per evitare totalmente l'import e lavorare con gli url dei file. Passando a img l'url non dovresti avere problemi.

[Alhazred]

Sto provando.
Che URL gli passi?
Io sto provando sia con URL relativi che assoluti, ma non mi funziona.

Le immagini ho provato sia a metterle in /src/assets/img/icons che in /public/img/icons
ho provato con
<img src='https://localhost:3000/src/assets/img/icons/museum_icon.png" ... />
<img src='https://localhost:3000/public/img/icons/museum_icon.png" ... />

nessuno dei due funziona

[M4V1]

Io li uso assoluti e mi funziona correttamente, vorrei riuscire a usarli relativi ma ancora non ho neanche provato.
Nel codice sopra hai gli apici sbagliati, non so se è un errore di copia/incolla o se sono scritti così nel codice.

[Alhazred]

Errore di trascrizione qui.
Le immagini le stai mettendo nella cartella src dove c'è il sorgete del progetto oppure nella cartella public che sta fuori?

[M4V1]

Prova così:

<img src={require(`${image}`)} />

Dove in image hai il path locale dell'immagine, in questo modo dovrebbero funzionare anche gli import in locale.
Io volevo fare così, ma come ti ho detto non ho ancora avuto modo di testarlo.

[Alhazred]

Ho fatto così e adesso funziona, ma penso solo perché ho anche XAMPP attivo che mi gestisce le URL locali al di fuori di quelle intercettate da ReacJS sulla porta 3000

nel metodo render()
const image = "http://localhost/testreact/public/img/icons/" + this.props.activity.action_icon + "_icon.png";

e poi
<img src={image} ... />

Una volta in produzione dovrebbe funzionare ugualmente con l'URL adeguata.

[M4V1]

In realtà penso che usando la cartella public dovrebbero funzionare correttamente anche senza xampp, se invece le metti nella cartella src probabilmente no perché vengono gestite da webpack in fase di build.