I’m working on a React app that fetches property data, including image URLs, from a Strapi backend. The API response contains the correct data, and I can directly access the images via their URLs in a browser, but the images are not displaying in the frontend. Instead, it shows “No images available”
When I access the API endpoint http://localhost:1337/api/properties?populate[images][fields][0]=url, I get the following response for property 21:
{
"id": 21,
"address": "example 1",
"price": 4,
"images": [
{
"id": 2,
"url": "/uploads/chicago_background_70fff5f0ee.jpg"
},
{
"id": 1,
"url": "/uploads/property_showcase_6363007fdf.png"
}
]
}
I can access the images directly via URLs like:
http://localhost:1337/uploads/chicago_background_70fff5f0ee.jpg
Despite the correct API response, the console logs show an empty images array for property 21:
Property 21 Images: Array []
import React, { useEffect, useState } from "react";
import axios from "axios";
const CarouselSection = ({ title }) => {
const [properties, setProperties] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProperties = async () => {
try {
const apiUrl = import.meta.env.VITE_API_URL;
console.log("API URL:", apiUrl);
const response = await axios.get(`${apiUrl}/api/properties?populate[images][fields][0]=url`);
console.log("Full Response:", response.data);
const propertiesData = response.data?.data || [];
if (!Array.isArray(propertiesData) || propertiesData.length === 0) {
throw new Error("No properties found or invalid response structure");
}
const parsedProperties = propertiesData.map((property) => {
const images =
Array.isArray(property.images) && property.images.length > 0
? property.images.map((image) => `${apiUrl}${image.url.startsWith('/') ? image.url : `/${image.url}`}`)
: [];
console.log(`Images for property ID: ${property.id} URLs:`, images);
return {
id: property.id,
address: property.address || "No Address Available",
price: property.price !== null ? `$${property.price}` : "N/A",
bedrooms: property.bedrooms || 0,
bathrooms: property.bathrooms || 0,
sqft: property.sqft || 0,
listingstatus: property.listingstatus || "Unknown",
zillowlink: property.zillowlink || "#",
images,
};
});
setProperties(parsedProperties);
} catch (err) {
setError("Failed to fetch property data");
console.error("Error fetching properties:", err.response ? err.response.data : err.message);
} finally {
setLoading(false);
}
};
fetchProperties();
}, []);
if (loading) return <p>Loading...</p>;
if (!properties.length) return <p>No properties available</p>;
return (
<section className="carousel-section">
<h1 className="title">{title}</h1>
<div className="carousel-container">
{properties.map((property) => (
<article key={property.id} className="carousel-card">
{property.images && property.images.length > 0 ? (
<div className="carousel-images">
{property.images.map((src, index) => (
<img key={index} src={src} alt={`Property ${property.id} Image ${index + 1}`} />
))}
</div>
) : (
<p>No images available</p>
)}
<p>{property.address}</p>
<p>{property.price}</p>
</article>
))}
</div>
</section>
);
};
export default CarouselSection;
I’ve verified that the backend API response contains the correct image URLs., confirmed the images are accessible directly via their URLs in the browser, and logged property.images in the frontend, but it always shows an empty array ([]) for all properties.
Environment:
Frontend Framework: React with Vite
Backend: Strapi dev
Development Server: Running locally on http://localhost:80
Strapi API: Running locally on http://localhost:1337
API Base URL: VITE_API_URL=http://localhost:80
The images for property 21 (and others with valid images) should display in the frontend but the frontend displays “No images available” even when the API response contains valid image data.
Why are the images not being processed correctly in the frontend? How can I fix this so that the images display as expected?