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

}

reactJS类中的工作代码

    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

我到这里结束是因为我一直在寻找一种从cloudinary在我的React应用程序中下载图像的方法，我发现上面的代码片段是一个有用的起点。我遇到与Darshn相同的错误。我推测它可能不起作用的原因是后端来源URL与客户端应用程序的来源不同。

然后，我进行了研究，发现锚元素的下载属性仅适用于同源URL。参见The Anchor element

然后我找到了一篇关于Soumitra Roy Sarkar的Roy Tutorials的文章，我可以将其纳入解决方案中。

我确定，由于我是从其他来源提取的，因此需要获取图像，将其转换为Blob，为其创建URL，然后将该URL附加到锚标记。

由于我已经在使用Cloudinary React SDK，因此能够将cloudinary-core添加到我的依赖项中。

<script>
    import axios from 'axios';

    export default {
        name: 'app',
        mounted: function() {
            axios.get('https://jsonplaceholder.typicode.com/posts');
        }
    };
</script>

然后将其导入到模块中

yarn add cloudinary-core

我的下载功能如下：

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

可以通过html元素调用该函数，如下所示：

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

使用React（前端）从Express（后端）下载图像

2 个答案: