Can anyone assist with fetching media from Strapi?

I've tried multiple approaches, and while I can retrieve all other data just fine, I'm unable to fetch media. Despite following various suggestions, the code still doesn't fetch media properly from Strapi. Any help would be greatly appreciated!


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

const Posts = () => {
const [posts, setPosts] = useState([]);

useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get('http://localhost:1337/posts');
setPosts(response.data);
} catch (error) {
console.error('Error fetching posts:', error);
}
};

fetchPosts();
}, []);

return (
<div>
{posts.map((post) => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
<p>Author: {post.author}</p>
<p>Date: {post.date}</p>
</div>
))}
</div>
);
}

export default Posts;