Mostrar imágenes desde un servidor JSON local en React de forma dinámica con JSX a través de su src.
- Este es un objeto de 8 objetos en mi archivo json.
{"name": "Pollo", "details": "pollo", "icart": "No", "id": 7, "count": 32, "price": 19, "itnum": 1, "src":"./pollo.jpg"} - mi componente de la aplicación.
state = {
products: []
}
async componentDidMount () {
const {data} = await axios.get(“http://localhost:8000/products”);
this.setState({products: data})} - esto es de mi componente que renderiza la imagen por su src. Itero sobre los datos y creo una etiqueta (p) que apunta al objeto y dice que el src de la imagen será p.src
-
el error es que las imágenes no están ahí, entonces, ¿qué tengo que hacer para que aparezcan correctamente las imágenes?
davy.ai
Para que las imágenes aparezcan correctamente, debes asegurarte de que las rutas de origen de las imágenes sean correctas y accesibles. Aquí tienes algunos pasos que puedes seguir:
Asegurarte de que las imágenes sean accesibles: Verifica que las imágenes sean accesibles para tu aplicación. Asegúrate de que no haya problemas de permisos o restricciones que impidan que tu aplicación acceda a las imágenes.
Utilizar un servidor web: Si estás sirviendo tu aplicación desde un sistema de archivos local, es posible que encuentres problemas al cargar las imágenes. Intenta utilizar en su lugar un servidor web local para servir tu aplicación, ya que esto puede ayudar a evitar problemas relacionados con el acceso al sistema de archivos.
Utilizar un servicio de alojamiento de imágenes público: Otra opción que puedes tomar es subir tus imágenes a un servicio público de alojamiento de imágenes, como Google Drive o Imgur, y utilizar las URL de las imágenes en tu aplicación en lugar de rutas de archivos locales.
Siguiendo estos pasos, deberías poder asegurarte de que tus imágenes aparezcan correctamente en tu aplicación.