How to get an image from Directus?

Question

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?

Answer 1

From the Directus Docs:

You can consistently access [your files/images] via the API using the following URL.

example.com/assets/<file-id>
example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4

Reference: https://docs.directus.io/reference/files/#accessing-an-file

---

For You

As you're wishing to display images in the browser, you will likely want something like this.

<img src={"//example.com/assets/" + article.image}" alt={article.title} />