如何在React项目中正确获取并展示Directus存储的图片资源

解决方案 #

Directus 中的静态资源默认通过固定规则拼接访问地址即可直接渲染，不需要额外用 blob 处理，你出现问题的原因是返回的 article.image 字段是文件的唯一ID，不是直接可访问的资源地址。

方案1：直接拼接资源地址（推荐，性能最优实现最简单）

Directus 静态资源的默认访问规则为 [你的Directus服务地址]/assets/[文件ID]，你只需要修改组件中 img 标签的 src 拼接规则即可：

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>
            {/* 注意给遍历元素加key属性避免React报错 */}
            {articles.map(article => 
                <div key={article.id}>
                    <h3>{article.title}</h3>
                    {/* 按规则拼接图片地址 */}
                    <img 
                      src={`http://localhost:8055/assets/${article.image}`} 
                      alt={article.title} 
                    />
                </div>
                
            )}
        </div>
    )
}

export default FileUpload

如果你的文件没有设置公开访问权限，需要在地址后拼接访问令牌：

<img 
  src={`http://localhost:8055/assets/${article.image}?access_token=你的Directus访问令牌`} 
  alt={article.title} 
/>

方案2：Blob 方式实现（适合需要做权限管控的场景）

如果你确实需要用 blob 方式处理，需要单独封装图片请求方法，指定返回类型为 blob 后生成临时访问链接：

1. 新增图片请求方法

// /async/fetchImage.js
import axios from "axios"

export const fetchImage = async (fileId) => {
  const response = await axios.get(`http://localhost:8055/assets/${fileId}`, {
    responseType: 'blob',
    // 非公开资源需要加认证头
    // headers: {
    //   Authorization: `Bearer 你的访问令牌`
    // }
  })
  return URL.createObjectURL(response.data)
}

2. 调整组件逻辑，批量获取图片临时链接

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

const FileUpload = () => {
    const [articles, setArticles] = useState([])
    useEffect(()=>{
        const getArticlesWithImg = async () => {
            const rawArticles = await fetchArticles()
            // 批量生成图片临时链接
            const articlesWithImg = await Promise.all(
                rawArticles.map(async item => {
                    const imgUrl = await fetchImage(item.image)
                    return {...item, imgUrl}
                })
            )
            setArticles(articlesWithImg)
        }
        getArticlesWithImg()

        // 组件卸载时释放blob内存避免泄漏
        return () => {
            articles.forEach(item => {
                if(item.imgUrl) URL.revokeObjectURL(item.imgUrl)
            })
        }
    }, [])

    return (
        <div>
            {articles.map(article => 
                <div key={article.id}>
                    <h3>{article.title}</h3>
                    <img src={article.imgUrl} alt={article.title} />
                </div>
            )}
        </div>
    )
}

export default FileUpload

注意事项

• 需要确保 Directus 的 CORS 配置已经允许你的 React 项目域名访问，否则会出现跨域错误
• 如果 Directus 配置了自定义的资源访问前缀，需要把拼接地址中的 /assets/ 替换为你实际的配置路径
• 非必要场景优先使用方案1，性能更高，不需要额外处理内存释放问题

内容的提问来源于stack exchange，提问作者Smile_mask