关于 javascript：从 URL 获取图像并在 React JS 中设置为背景

Fetch image from URL and set as background in React JS

我想从 URL 中获取图像并显示它。

我将 url 作为 URL 文本字段中的输入，当我在 img 标签中使用它时，它的工作原理就像但是当我在 td 背景中传递或使用它时它不起作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

import React, { Component } from 'react';

class ImageStyle extends Component {

constructor(props) {
super(props);

this.state = {
title: '',
url: '',
summary: ''
};

this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {

this.setState({
[event.target.name]: event.target.value
});

}

render() {

return (

<h1 className="row px-2">Image Style Notification
<hr />

<br />

<input type="text"
className="form-control"
placeholder="Title"
name="title"
value={this.state.title}
onChange={this.handleInputChange}
/>

<textarea
className="form-control"
placeholder="Image URL"
name="url"
value={this.state.url}
onChange={this.handleInputChange}
/>

<textarea
className="form-control"
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>

<br />

<button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>

<button className="nav-link btn btn-block btn-danger"> Cancel</button>

<br />

<br />

<table className="table table-clear width-css">
<tbody>
<tr>
<td backgroundImage: 'url(${this.state.url})'>

{this.state.title}
<br />
{this.state.summary}<br />
</td>
</tr>
</tbody>
</table>

)

}
}

export default ImageStyle;

指定表格的样式并提及背景图片 url，如

1	backgroundImage: `url(${this.state.url})`

class ImageStyle extends Component {

constructor(props) {
super(props);

this.state = {
title: '',
url: '',
summary: ''
};

this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {

this.setState({
[event.target.name]: event.target.value
});

}

render() {
var styles = {
backgroundImage: `url(${this.state.url})`
}
return (

<h1 className="row px-2">Image Style Notification
<hr />

<br />

<input type="text"
className="form-control"
placeholder="Title"
name="title"
value={this.state.title}
onChange={this.handleInputChange}
/>

<textarea
className="form-control"
placeholder="Image URL"
name="url"
value={this.state.url}
onChange={this.handleInputChange}
/>

<textarea
className="form-control"
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>

<br />

<button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>

<button className="nav-link btn btn-block btn-danger"> Cancel</button>

<br />

<br />

<table className="table table-clear width-css">
<tbody>
<tr>
<td style={styles}>

{this.state.title}
<br />
{this.state.summary}<br />
</td>
</tr>
</tbody>
</table>

)

}
}