React:点击按钮从目录中的静态位置加载图像

Question

当用户点击"样本1"按钮，它应该加载并显示位于本地的图像。

这是我尝试的，但它不工作

import React, {Component} from 'react';
import image_1 from "../../static_media/1.png"
import image_2 from "../../static_media/2.png"
import {Container, Image} from "react-bootstrap";

class Classifier extends Component {
state = {
files: [],
isLoading: false,
recentImage: null,
}

handleClick = (e) => {
const ImageData = [image_1, image_2]
const FILES = {
"image_1": [{
name: "image_1",
size: "100",
image: ImageData[0]
}],
"image_2": [{
name: "image_2",
size: "200",
image: ImageData[1]
}],
"image_3": [{
name: "image_3",
size: "300",
image: ImageData[1]
}],
}
// you can now use this value to load your images
const prefix = e.target.dataset.prefix; // 1
this.setState({
files: [],
isLoading: true,
recentImage: null
})
this.loadImage(FILES[`image_${prefix}`])
}
loadImage = (files) => {
setTimeout(() => {
this.setState({
files,
isLoading: false
}, () => {
console.log(this.state.files[0])
})
}, 1000);
}
render() {
const files = this.state.files.map(file => (
<li key={file.name}>
{file.name} - {file.size} bytes
</li>
));
return (
<Container>
<button
data-prefix="1"
onClick={(e) => this.handleClick(e)}
className="btn btn-primary">
Sample 1
</button>
<aside>
{files}
</aside>
<div className="img-fluid">
{this.state.files.length > 0 &&
<Image
src={URL.createObjectURL(this.state.files[0])}
height='400' rounded/>
}
</div>
</Container>

)
}
}
export default Classifier;

我得到一个错误

TypeError: Failed to execute 'createObjectURL' on 'URL': Overload解析失败。

78 | 79 | {this.state.files.length

0,,80 |<图片81 src="{URL.createObjectURL(this.state.files[0])}|" _x0038_2=" height="400" 圆润=" />83 |} 84 |

理想情况下，我想创建一个实际的图像对象，以便我能够将此图像发送到Django REST API。

Answer 1

URL.createObjectURL()需要一个Blob或File对象。(你可以在这里阅读URL.createObjectURL()的链接)

创建Blob对象最简单的方法是使用Fetch API。

import React, {Component} from 'react';
import image_1 from "../../static_media/1.png"
import image_2 from "../../static_media/2.png"
import {Container, Image} from "react-bootstrap";

class Classifier extends Component {
state = {
files: [],
isLoading: false,
recentImage: null,
}

handleClick = async (e) => {
const ImageData = [image_1, image_2]
const FILES = {
"image_1": [{
name: "image_1",
size: "100",
image: await fetch(ImageData[0]).then(res => res.blob()) 
}],
"image_2": [{
name: "image_2",
size: "200",
image: await fetch(ImageData[1]).then(res => res.blob())
}],
"image_3": [{
name: "image_3",
size: "300",
image: await fetch(ImageData[1]).then(res => res.blob())
}],
}
// you can now use this value to load your images
const prefix = e.target.dataset.prefix; // 1
this.setState({
files: [],
isLoading: true,
recentImage: null
})
this.loadImage(FILES[`image_${prefix}`])
}
loadImage = (files) => {
setTimeout(() => {
this.setState({
files,
isLoading: false
}, () => {
console.log(this.state.files[0])
})
}, 1000);
}
render() {
const files = this.state.files.map(file => (
<li key={file.name}>
{file.name} - {file.size} bytes
</li>
));
return (
<Container>
<button
data-prefix="1"
onClick={(e) => this.handleClick(e)}
className="btn btn-primary">
Sample 1
</button>
<aside>
{files}
</aside>
<div className="img-fluid">
{this.state.files.length > 0 &&
<Image
src={URL.createObjectURL(this.state.files[0].image)}
height='400' rounded/>
}
</div>
</Container>

)
}
}
export default Classifier;

Answer 2

您需要手动指定图像信息，否则您将需要额外的步骤来动态获取文件大小。

const FILES = {
"image_1": [{
name: "image_1",
size: "100",
image: require("../../static_media/1.png").default
}],
"image_2": [{
name: "image_2",
size: "200",
image: require("../../static_media/2.png").default
}],
}

为每个按钮添加data属性和click event，

<button 
...
data-prefix="1" 
onClick={(e) => this.handleClick(e)}> Sample 1</button>

handleClick = (e) => {
// you can now use this value to load your images
const prefix = e.target.dataset.prefix; // 1
this.setState({
files: [],
isLoading: true,
recentImage: null
})
this.loadImage(FILES[`image_${prefix}`])
}