如何从 Directus 获取图像？

Question

我需要显示来自 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

代码

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
}

从 directus 我得到这个数据

我读到了 blob 方法，但我无法理解。

我该怎么办？

Answer 1

来自 Directus 文档：

您可以使用以下 URL 通过 API 持续访问 [您的 files/images]。

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

参考：https://docs.directus.io/reference/files/#accessing-an-file

为你

如果您希望在浏览器中显示图像，您可能需要这样的东西。

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

如何从 Directus 获取图像？

How to get an image from Directus?

javascript

reactjs

directus