react 下载图片
时间: 2023-09-13 21:09:36 浏览: 51
在 React 中,你可以使用 `fetch` 或 `axios` 来下载图片。以下是一个示例:
```jsx
import React from 'react';
class ImageDownloader extends React.Component {
constructor() {
super();
this.state = {
imageUrl: '',
};
}
downloadImage = () => {
fetch('https://example.com/image.jpg')
.then((response) => response.blob())
.then((blob) => {
// 创建一个临时的URL对象
const imageUrl = URL.createObjectURL(blob);
this.setState({ imageUrl });
});
};
render() {
const { imageUrl } = this.state;
return (
<div>
<button onClick={this.downloadImage}>下载图片</button>
{imageUrl && <img src={imageUrl} alt="下载的图片" />}
</div>
);
}
}
export default ImageDownloader;
```
上述代码中,通过 `fetch` 请求图片资源,并将其转换为 Blob 对象。然后,使用 `URL.createObjectURL()` 方法创建一个临时的 URL 对象,将其设置为 `<img>` 元素的 `src` 属性,从而显示下载的图片。
记得将 `https://example.com/image.jpg` 替换为你要下载的真实图片的URL。