Как установить разные базовые пути для изображений при производстве и разработке в 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.Я бы хотел, чтобы на основе переменной среды можно было переключаться между производством и разработкой.

например,

Dev:

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`;