Mi api está obteniendo una imagen, pero parece que no puedo mostrarla en ReactJs.
La API:
[ { "id": 1, "vessel_component_count": 3, "vessel_inventory_category_count": 0, "name": "Aylah", "imo": "Aylah123", "image": "/media/vessel_image/aylah.jpg" }, { "id": 2, "vessel_component_count": 1, "vessel_inventory_category_count": 0, "name": "Sinaa", "imo": "sinaa123", "image": null }, { "id": 3, "vessel_component_count": 0, "vessel_inventory_category_count": 0, "name": "Amman", "imo": "amman123", "image": "/media/vessel_image/amman.jpg" } ]el codigo en reaccionar
componente principal Homescreen.js:
function HomeScreen() { const [vessels, setVessels] = useState([]); useEffect(() => { async function fetchVessels() { const { data } = await axios.get( "http://127.0.0.1:8000/api/vessels/info" ); setVessels(data); } fetchVessels(); }, []); return ( <div> Fleet vessels : <div className="fleet-vessels-info"> {vessels.map((vessel) => ( <VesselCard vessel={vessel} /> ))} </div> </div> ); } export default HomeScreen;el componente secundario VesselCard.js:
function VesselCard({ vessel }) { return ( <div className="fleet-vessel-card"> {vessel.name} <img src={vessel.image} /> </div> ); } export default VesselCard;obtener todo lo demás, como el nombre y la OMI, funciona bien, excepto la imagen.
Parece que, dado que las rutas de la imagen son devueltas relativamente por su backend, en su lugar, está tratando de obtenerlas de su servidor frontend.
p.ej. Si su backend es "backend.com" y su frontend es "frontend.com" (es decir, donde se ejecuta su servidor de aplicaciones localhost/react),
entonces está buscando 'frontend.com/media/vessel_image/amman.jpg' cuando parece que debería estar buscando 'backend.com/media/vessel_image/amman.jpg'
Puede ver esto si revisa sus Dev tools > Network tab y ve que no puede encontrar las imágenes.
La ruta de la imagen que proporcionó es relativa. Proporcione la ruta absoluta de la imagen o almacene estas imágenes en una carpeta pública. public > media > vessel_image