Загрузить изображение из Express (Back-end) с помощью React (Front-end)

Question

У меня есть изображение, хранящееся на сервере Express. Я пытался загрузить изображение, используя следующий метод в компоненте React.

 <a href={my_image_url_from_state} download>Download Image</a>

Но когда я нажимаю на "Загрузить изображение" изображение не загружается. Я вижу это сообщение об ошибке:

Я могу отобразить одно и то же изображение в теге img, т.е.

<img src={my_image_url_from_state} />

это ничего не значит неправильно с URL.

Нужно ли вносить какие-либо изменения в Express для загрузки каких-либо файлов?

Answer 1

Вам нужно написать функцию и вызвать ее на OnClick кнопки загрузки.

<button onClick={() => {download()}}>Download</button>

Функция загрузки будет:

function download() {
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();

}

рабочий код в классе ReactionJS

    class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <img onClick={() => { download(); }} src="<The URL of the image>" />
            </div>
        );
    }
}

function download() {
    var link = document.createElement('a');
    link.href = 'images.jpg';
    link.download = '<The URL of the image>';
    document.body.appendChild(link);
    link.click();
}

Answer 2

Я оказался здесь, потому что искал способ загрузить изображение в свое приложение React из облачного хранилища, и нашел приведенный выше фрагмент в качестве полезной отправной точки. Я получал ту же ошибку, что и Darshn. Я предполагаю, что, возможно, причина, по которой он не работал, заключается в том, что исходный URL-адрес серверной части отличался от источника клиентского приложения.

Затем я исследовал и обнаружил, что атрибут загрузки элемента привязки работает только для URL-адресов того же происхождения. См. Элемент "Якорь"

Затем я нашел статью о Soumitra Рой П. Р. Саркара Рой Tutorials, что я был в состоянии включить в раствор.

Я определил, что, поскольку я извлекал из другого источника, мне нужно будет получить изображение, преобразовать его в Blob, создать для него URL-адрес, прикрепить URL-адрес к тегу привязки.

Поскольку я уже использовал Cloudinary React SDK, я смог добавить облачное ядро ​​в свои зависимости.

yarn add cloudinary-core   

Затем я импортировал его в свой модуль

import cloudinary from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: '<My Cloudinary Cloud Name>'});

Моя функция загрузки выглядит так:

function download({publicKey, name}) {

const downloadUrl = `${cloudinaryCore.url(publicKey)}.jpg`;
fetch(downloadUrl)
    .then((img) => img.blob())
    .then((blob) => {
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.href = url;
        link.download = name;
        link.click();
    })
}

Функция может быть вызвана элементом html следующим образом:

<button onClick={() => {download({publicKey: '12345', name: 'image.jpg'})}}>Download</button>