API-platform/Admin: How Render ImageField with custom src?

Question

I want to inject full path to my media in admin of API-platform with following this doc

was impossible to generate full path URI I try this:

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

from: this stack

I obtain this result:

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

my src needs to be:

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

from my api:

contentUrl = myFile.jpg

I need concat this with process.env.REACT_APP_API_ENTRYPOINT

thanks for your help!

Answer 1

Did you set the variable before you start the webpack dev server or before you build your project?

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

Answer 2

You can use FunctionField like this:

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