Доступ к изображениям в React, которые находятся за пределами папки проекта на локальном компьютере
Я работаю над веб-приложением с интерфейсом React и серверной частью веб-API .NET. Приложение будет содержать большое количество загружаемых пользователем изображений. Мне кажется нелогичным хранить эти изображения в папке проекта React. Вероятно, в конечном итоге я буду использовать хранилище BLOB-объектов Azure.
Мой вопрос: как мне смоделировать это на моем локальном хосте во время разработки?
Как я могу получить доступ к изображениям из каталога за пределами папки проекта React?
После запуска он получит URI изображения из каталога облачного хранилища, но есть ли способ имитировать это во время разработки на моем локальном компьютере? Думаю, я мог бы настроить учетную запись облачного хранилища сейчас, но надеялся сэкономить немного долларов и не делать этого, пока приложение не будет ближе к завершению.
Ответы 2
Создать какое-нибудь простое серверное приложение локально с конечной точкой для изображений, которое будет отправлять файлы из вашей папки?
Я использовал аналогичное решение для приложения act+node.js и получал доступ к этим фотографиям, помещая строку «/api/images/:id» в атрибут <img src/> или background-image для элементов div.
Создайте папки, вызовите Resouces/Images для хранения изображений:
В вашем Program.cs
var app = builder.Build();
// Configure the HTTP request pipeline.
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "Resources/Images")),
RequestPath = new PathString("/Images")
});
Теперь вы можете показывать свои местные изображения через http://localhost:<development-port>/Images/<ImageName>. Например: Мой: http://localhost:5296/Images/image1.jpg
В вашем контроллере, где вы должны возвращать URL-адреса изображений из хранилища BLOB-объектов, вместо этого верните эти локальные URL-адреса.
Используйте базу данных и сохраняйте изображения в виде строки. stackoverflow.com/questions/77404036/…