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;
<img>
? Qué tienen en elsrc
?