System Information
- Strapi Version: 4.9.2
- Operating System: React/Axios front end.
- Database: N/A
- Node Version: 18.15.0
- NPM Version: 9.5.0
- Yarn Version: N/A
Hi, I am trying to use Strapi to add a blog to a website I am building but I am having issues getting my pictures to display. My project is built with React and I am using Axios for the API. Currently my code displays the text, the image alts(Or a broken image link if I don’t have an alt), and titles to the posts. The issue is I can not get the images to display at all. The URL does show in the response from insomnia and console.log displays the rest of the data fine, and “preview unavailable” if you hover over the image url. I have read all the docs, and assume I am not using the populate parameter correctly, but would love to get some advice if someone has time to chime in. I used v3 Strapi a small amount but still fairly new to programming overall.
Here is my code.
import axios from 'axios';
import { useEffect, useState } from 'react';
export default function Blog(){
const [error, setError] = useState(null);
const [response, setResponse] = useState([]);
useEffect(() => {
axios
.get('http://localhost:1337/api/blogs?populate=media')
.then(({ data }) => {
setResponse(data.data.map(({ id, attributes }) =>
({ id,
text: attributes.text,
richtext: attributes.richtext,
media: attributes.media
}))
);
})
.catch((error) => {
setError(error)
});
}, []);
if (error) {
// Print errors if any
return <div>An error occurred: {error.message}</div>;
}
return (
<div className="App">
{response.length > 0 ? (
<div>
{response.map(({ id, text, richtext, media}) => {
console.log(response); // Log media object for debugging
const imageUrl = media.data[0].attributes.url; // Get URL of the first media object
const imageAlt = media.data[0].attributes.alternativeText; //Gets image alt
return (
<div key={id}>
<h3>{text}</h3>
<img src={imageUrl} alt={imageAlt} style={
{maxWidth:"100%", height: "auto"}}/>
<p>{richtext}</p>
</div>
);
})}
</div>
) : (
<div>Loading...</div>
)}
</div>
);
};
This is what I get back from insomnia.
{
"data": [
{
"id": 1,
"attributes": {
"text": "Blog post one",
"richtext": "post 1",
"createdAt": "2023-04-25T14:33:39.587Z",
"updatedAt": "2023-04-28T18:46:45.944Z",
"publishedAt": "2023-04-25T14:39:49.619Z",
"media": {
"data": [
{
"id": 5,
"attributes": {
"name": "IMG_0036.JPG",
"alternativeText": "alt",
"caption": "knife",
"width": 4032,
"height": 3024,
"formats": {
"thumbnail": {
"name": "thumbnail_IMG_0036.JPG",
"hash": "thumbnail_IMG_0036_28881df466",
"ext": ".JPG",
"mime": "image/jpeg",
"path": null,
"width": 208,
"height": 156,
"size": 10.89,
"url": "/uploads/thumbnail_IMG_0036_28881df466.JPG"
},
"small": {
"name": "small_IMG_0036.JPG",
"hash": "small_IMG_0036_28881df466",
"ext": ".JPG",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 375,
"size": 69.41,
"url": "/uploads/small_IMG_0036_28881df466.JPG"
},
"medium": {
"name": "medium_IMG_0036.JPG",
"hash": "medium_IMG_0036_28881df466",
"ext": ".JPG",
"mime": "image/jpeg",
"path": null,
"width": 750,
"height": 563,
"size": 155.94,
"url": "/uploads/medium_IMG_0036_28881df466.JPG"
},
"large": {
"name": "large_IMG_0036.JPG",
"hash": "large_IMG_0036_28881df466",
"ext": ".JPG",
"mime": "image/jpeg",
"path": null,
"width": 1000,
"height": 750,
"size": 282.73,
"url": "/uploads/large_IMG_0036_28881df466.JPG"
}
},
"hash": "IMG_0036_28881df466",
"ext": ".JPG",
"mime": "image/jpeg",
"size": 3137.9,
"url": "/uploads/IMG_0036_28881df466.JPG",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2023-04-28T18:21:55.209Z",
"updatedAt": "2023-04-28T18:33:40.296Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
Thanks for the help!
