Загрузить изображение из 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();

}

работаеткод в классе JJ

    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();
}