使用Variable定义主机，并将其传递给React JS中具有图像文件名的Image标签

Question

我正试图将类似http://localhost:1337的主机URL从一个中心文件传递到所有组件中的所有图像标记。目前，我可以像下面这样渲染我的图像。

<img
style={{ height: "212px" }}
src={`http://localhost:1337${props.data.image1.url}`}
alt="new"
/>{" "}

我很想在下面实现这样的目标-

const API_URL = 'http://localhost:1337' //in one random file like .env in NodeJS at root  

并且我的所有图像标签都从那里获取图像
目前在一个组件内这样做，它可以工作。

export default function Home(props) {
const API_URL = 'http://localhost:1337';  
return(  
<img
style={{ height: "212px" }}
src={`http://localhost:1337${props.data.image1.url}`}
alt="new"
/>{" "})
...rest of the code here
)
}

目前它的抛出错误。我的语法有问题
注意：我的图像在云中，而不是在公用文件夹中，我可以像process.env.Public…那样引用公用文件夹

提前谢谢。

Answer 1

<img
style={{ height: "212px" }}
src={API_URL + props.data.image1.url}
alt="new"
/>

试试这个方法！