0

Estoy llamando una mis imágenes por petición get pero no me las muestra las imagenes en mi .map, he intentado pero no he podido y si reviso mi petición get "https://aliraweb.com/apiAliraweb/anuncios_img/index1.php" trae todas la imágenes pero no me muestra nada en mi .map.

https://codesandbox.io/s/cranky-pine-hgjsdp?file=/src/App.js:213-269

code:

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [ruta, setRuta1] = useState([]);

  const peticionGet_imagenes1 = async () => {
    await axios
      .get(`https://aliraweb.com/apiAliraweb/anuncios_img/index1.php`)
      .then((res) => {
        setRuta1(res.data.ruta);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const imageNames = [ruta];

  useEffect(() => {
    const interval = setInterval(() => {
      peticionGet_imagenes1();
    }, 1000);

    return () => setInterval(interval);
  }, []);

  return (
    <div>
      <h2>Galería de imágenes</h2>
      <div className="image-container">
        {imageNames.map((ruta, index) => (
          <img
            key={index}
            style={{ width: "100%" }}
            src={`https://aliraweb.com/apiAliraweb/fotos_anuncios/Imagenes/${ruta}`}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

2
  • Se está actualizando el DOM con los elementos <img>? Qué tienen en el src? el 24 jul. a las 14:48
  • el problema lo tengo en traer los datos en la petición get, asi coloque un console.log no me carga nada, pero si voy directamente a la ruta "aliraweb.com/apiAliraweb/anuncios_img/index1.php" me muestra los valores.
    – Giovanny
    el 24 jul. a las 15:02

1 respuesta 1

1

Hice 3 correcciones a tu código:

  1. en la respuesta de axios, res.data es un array con objetos {ruta: 'ruta.png'}. Entonces se usa setRuta1(res.data).
  2. ruta ya es un array, por lo que imageNames se asigna como const imageNames = ruta.
  3. en el map hay que deconstruir el objeto ruta y obtener el parámetro ruta. Tambien se puede usar la ruta como key para el elemento img.

El código final es el siguiente:

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [ruta, setRuta1] = useState([]);

  const peticionGet_imagenes1 = async () => {
    await axios
      .get(`https://aliraweb.com/apiAliraweb/anuncios_img/index1.php`)
      .then((res) => {
        setRuta1(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const imageNames = ruta;

  useEffect(() => {
    const interval = setInterval(() => {
      peticionGet_imagenes1();
    }, 1000);

    return () => setInterval(interval);
  }, []);

  return (
    <div>
      <h2>Galería de imágenes</h2>
      <div className="image-container">
        {imageNames.map(({ruta}) => (
          <img
            key={ruta}
            style={{ width: "100%" }}
            src={`https://aliraweb.com/apiAliraweb/fotos_anuncios/Imagenes/${ruta}`}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

EDIT:

Considerando que el state ruta es un array, conviene cambiarlo a algo como:

const [listaRutas, setListaRutas] = useState([]);

Usar listaRutas directamente en el map, sin asignar una variable como imageNames:

listaRutas.map(({ruta}) => ( <img key={ruta} src={ruta} /> ))

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.