I need to display images from directus

import React, { useEffect, useState } from 'react'
import { fetchArticles } from './async/fetchArticels'

const FileUpload = () => {
    const [articles, setArticles] = useState([])
    useEffect(()=>{
        fetchArticles().then(data => setArticles(data))
    }, [])

    return (
        <div>
            {articles.map(article => 
                <div>
                    <h3>{article.title}</h3>
                    <img src={article.image} alt="img" />
                </div>
                
            )}
        </div>
    )
}

export default FileUpload

code

import axios from "axios"

export const fetchArticles = async () => {
    const {data} = await axios.get('http://localhost:8055/items/articles')
    console.log(data.data)
    return data.data
}

from the directus I get this data

I read about the blob method, but I can't get it.

What should I do?