Ошибка при попытке отобразить изображение, сохраненное в компьютерном файле

#javascript #asp.net

Вопрос:

Я разрабатываю приложение, которое позволяет мне привести некоторые файлы сохраненные на другом сервере для этого у меня есть код в Asp.net что я потребляю с JavaScript, чтобы приблизить изображение, но когда я получаю изображение, чтобы показать его, следующие выдает мне ошибку, не разрешено загружать локальный ресурс: файл: /// с: /Пользователи/пользователь/рабочий стол/кнопку легкий/prfil/выполнять.PNG, но когда я копирую одну и ту же ссылку в браузере, если это приносит мне образ:
это мой код .объем:

 public IHttpActionResult Get(string nombreArchivo)
{
    string directorio = "C:UsersusuarioDesktopimagenes"
    string ruta = directorio   nombreArchivo;
    if (File.Exists(ruta))
    {
        var result = new
        {
            imagen = ruta.Replace('\', '/')
        }
        return Ok(result);
    }
    else
    {
        var result = new
        {
            imagen = "No existe la imagen"
        }
        return Ok(result);
    }
}
 

И это мой код JavaScript:

 const file = async () => {
    const res = await fetch(`http://localhost:64108/api/Archivos/?nombreArchivo=perfil/descarga.png`);
    const datos = await res.json();

    foto.style.backgroundImage = `url('${datos.imagen}')`;
};
 

Комментарии:

1. Какое значение вы присвоили переменной directorio ?

2. @SalihKavaf Я уже добавил значение в каталог

Ответ №1:

Браузеры используют локальный file:// протокол для загрузки локальных файлов, который разрешен только для локальных вызовов. То же самое с протоколом HTTP; использовать этот протокол с последующим полным путем к локальному файлу не получится. Тем не менее, у вас есть по крайней мере два варианта. Вы либо предоставляете общую папку в корневом каталоге вашего приложения, где вы можете получить доступ к файлу, используя относительный URI, что является более безопасным способом сделать это. Другим возможным подходом является возврат файла вместо пути. Для этого вы можете сделать что-то подобное:

Язык JavaScript

 let url = "http://localhost:64108/api/Archivos/?nombreArchivo=perfil/descarga.png";
let init = {
    method: 'GET',
    headers: {
        'Accept': 'image/png'
    }
};

fetch(url, init)
    .then(function (res) {
        // ...
    })
    .catch(function (err) {
        // ...
    });
 

C#

 public IHttpActionResult Get(string nombreArchivo)
{
    string directorio = "C:\Users\usuario\Desktop\imagenes\";
    string ruta = directorio   nombreArchivo;

    if (System.IO.File.Exists(ruta))
        return File(path, Request.Headers["Accept"]); // We've already set this to "image/png" in the javascript part

    else return BadRequest("No existe la imagen");
}
 

Комментарии:

1. Большое вам спасибо, это была большая помощь, я не знал о локальных файлах, спасибо за это объяснение

2. Рад помочь, мой друг 🙂