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

Question

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

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

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 ( 
      <div>
        <div>
          <h1 className="row px-2">Image Style Notification</h1>
          <hr />
          <div className="row px-1 py-2 animated fadeIn">

                <div className="px-1" style={{ width:50 + '%' }}><br />

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

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

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

                    <br />

                    <div className="row px-2" >
                      <div>
                        <button className="nav-link btn btn-block btn-info"  onClick={this.handleClick} >Save</button>
                      </div>
                      <div className="px-1">
                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                      </div>
                    </div><br />

                </div>
                <div><br />
                  <div className="mobile">
                      <table className="table table-clear width-css">
                      <tbody>
                        <tr>
                          <td backgroundImage: 'url(${this.state.url})'>
                            <strong>
                              {this.state.title}
                            </strong><br />
                           {this.state.summary}<br /> 
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
          </div>
    </div>
    </div>
    )

  }
}

export default ImageStyle;

Answer 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 ( 
      <div>
        <div>
          <h1 className="row px-2">Image Style Notification</h1>
          <hr />
          <div className="row px-1 py-2 animated fadeIn">

                <div className="px-1" style={{ width:50 + '%' }}><br />

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

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

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

                    <br />

                    <div className="row px-2" >
                      <div>
                        <button className="nav-link btn btn-block btn-info"  onClick={this.handleClick} >Save</button>
                      </div>
                      <div className="px-1">
                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                      </div>
                    </div><br />

                </div>
                <div><br />
                  <div className="mobile">
                      <table className="table table-clear width-css">
                      <tbody>
                        <tr>
                          <td style={styles}>
                            <strong>
                              {this.state.title}
                            </strong><br />
                           {this.state.summary}<br /> 
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
          </div>
    </div>
    </div>
    )

  }
}