如何在 React 的生产和开发中为图像设置不同的基本路径

Question

我在生产中检索我的图像为：

src="/dibble_back_end/images/icon.png"

然后通过我的nginx代理：

location /dibble_back_end {
    proxy_pass http://dibble_back_end:4000;
    rewrite ^/dibble_back_end(.*)$ $1 break;
}

问题是在开发反应服务器上运行在 ExpressJS 中，而不是在 ngInx 上运行。我希望基于环境变量能够在生产和开发之间切换。

例如

开发：

src="localhost:4000/images/icon.png"

生产：

src="/dibble_back_end/images/icon.png"

Answer 1

您没有提供有关设置的详细信息，但是如果您使用的是创建 React 应用程序，则可以使用 NODE_ENV 环境变量，如下所示：

const src = process.env.NODE_ENV === 'production' ? "/dibble_back_end/images/icon.png" : "localhost:4000/images/icon.png"

或

const basePath = process.env.NODE_ENV === 'production' ? "/dibble_back_end" : "localhost:4000";
const src = `${src}/images/icon.png`;