如何从 Directus 获取图像？答案

【问题标题】：How to get an image from Directus?如何从 Directus 获取图像？
【发布时间】：2021-11-04 10:51:30
【问题描述】：

我需要显示来自 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 方法，但我不明白。

我该怎么办？

【问题讨论】：

标签： javascript reactjs directus

【解决方案1】：

来自 Directus 文档：

您可以使用以下 URL 通过 API 持续访问 [您的文件/图像]。

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} />

【讨论】：