如何将Directus图片设置为卡片背景？

你的代码主要有两个问题：

1. 模板字符串语法错误：用双引号包裹URL时，里面的{someColletion.image.id}不会被解析成变量值，得用反引号``来写模板字符串
2. 直接用图片ID无法访问：Directus的图片不能仅通过ID访问，需要生成完整的可访问URL

下面分两种场景给你正确写法：

场景1：在Directus自定义扩展（React）里开发 #

Directus提供了useAsset钩子来生成图片的访问链接，这是官方推荐的方式：

import { useAsset } from '@directus/extensions-sdk';

// 假设你已经从集合中拿到了图片数据，存在someCollection.image里
const imageUrl = useAsset(someCollection.image);

<Card style={{ 
    backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: '200px' // 给卡片加个最小高度，避免没图时太矮
}}>
    <CardHead />
    <CardContent />
</Card>

场景2：外部应用调用Directus API #

如果是在自己的React项目里调用Directus API获取数据，直接构造图片的API URL即可：

// 替换成你的Directus实例地址
const directusUrl = 'https://your-directus-domain.com';
// someCollection.image.id是你拿到的图片ID
const imageUrl = someCollection.image ? `${directusUrl}/assets/${someCollection.image.id}` : null;

<Card style={{ 
    backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: '200px'
}}>
    <CardHead />
    <CardContent />
</Card>

额外注意事项 #

• 一定要判断图片是否存在，避免图片为null时出现无效URL的错误
• 可以添加backgroundSize: 'cover'和backgroundPosition: 'center'让图片更好地适配卡片
• 如果需要调整图片尺寸或裁剪方式，可在URL后加参数，比如${directusUrl}/assets/${someCollection.image.id}?fit=cover&width=600

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