API-platform/Admin:如何使用自定义src渲染ImageField

Question

我想在API-platform的管理中注入我的媒体的完整路径遵循此文档

无法生成完整路径URI我尝试这样做：

field.field = props => (
<ImageField source="contentUrl"  {...props} >
<FunctionField render={ render => {
console.log(render)
return `${process.env.REACT_APP_API_ENTRYPOINT}/media/${render.contentUrl}`
}}  />
</ImageField>
);

来自：此堆栈

我得到了这个结果：

<img src="[object Object]" class="ImageField-image-274">

我的src需要是：

http://localhost:8080/media/myFile.jpg

来自我的api：

contentUrl = myFile.jpg

我需要将此与process.env.REACT_APP_API_ENTRYPOINT连接

谢谢你的帮助！

Answer 1

是否在启动webpack-dev服务器之前或在构建项目之前设置了变量？

export REACT_APP_API_ENTRYPOINT=http://localhost/....
npm start 

Answer 2

您可以这样使用FunctionField：

<FunctionField
label="Image"
render={(record: any) => {
return (
<img
src={`${process.env.REACT_APP_API_ENTRYPOINT}/media/${record.contentUrl}`}
/>
);
}}
/>