Estoy trabajando en un proyecto de reacción y tengo una situación en la que necesito el atributo src para que una etiqueta img sea una variable. Las partes relevantes del código se ven así:
import React, { useState, useEffect } from 'react'; // topics is already defined and is a js object const allTopics = topics.map(topic => { url = topic['image_url']; return ( <Grid item key={ topic['topic_id'] } item xs={4}> <div class='img-wrapper'> <img id='topicpreview' src={url} alt="loading" /> <h1>{topic['topic_name']}</h1> </div> </Grid> ); }); return ( <div style={{ padding: '0', margin: '0', border: '1px solid black', width: '100%', height: '60%', overflow: 'hidden', display: 'inline-block' }} text-align='center'> <Grid container> {allTopics} </Grid> </div> );La ruta de la imagen existe y apunta a un archivo válido y he registrado la URL en la consola para asegurarme de que sea la misma ruta. Sin embargo, no encuentra la imagen y termina imprimiendo el texto alternativo "Cargando". No estoy seguro de lo que está pasando, ¡así que agradecería cualquier ayuda!
Creo que entendí tu problema.
No podemos usar una ruta local en img , porque se referirá a su directorio local (no al dominio de su sitio web)
Para solucionarlo, debe llamar al siguiente fragmento de código si está utilizando Webpack
const image = require(url); //or const image = require(url).default; <img src={image} /> También puede intentar encontrar su imagen local con esta URL localhost:3000/static/images/piano2.jpeg (su puerto puede ser diferente)