javascript - How to set the background image for a div in React? - Stack Overflow

admin管理员组

文章数量:1418419

I'm creating a react application, and I have a ponent that is define more or less like this:

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      loading: true,
      error: null
    };
  }

  ponentDidMount() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("LinkToAPI")
        .then(result => {
          _this.setState({
            data: result.data,
            loading: false,
            error: null
          });
        })
        .catch(err => {
          _this.setState({
            loading: false,
            error: err
          });
        });
  }

  ponentWillUnmount() {
    this.serverRequest.abort();
  }

  renderLoading() {
    return <div>Loading...</div>
  }

  renderError() {
    return (
      <div>
        Something when wrong: {this.state.error.message}
      </div>
    );
  }

  renderData() {
    const { error, data} = this.state;

    if (error) {
      return this.renderError();
    }

    return (
      <div>
        {data.map(d=> {
          if (d.imageUrl) {
            <div className="dataDiv" style="background: url('{d.imageUrl}')" key={d.Id}>{d.name}</div>
          } else {
            <div className="dataDiv" style="background: url('LinkToSomeImage')" key={d.Id}>{d.name}</div>
          }
        }
        )}
      </div>
    )
  }

  render() {
    return (
      <div className="App">
        {this.props.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
  }
}

It basically gets the JSON data from the API, and using it renders some divs with the data inside the JSON. I'm applying to the divs containing the data dataDiv class, which is define inside my App.css file. Additionally, I want to set a background image for the div. What exactly I want to do is that if the data entry includes a field named imageUrl I want to use that url as a url to the background image, otherwise, if it is null or empty, I want to use a default url that I found from the internet. What is a proper way to handle this in React? The code segment above doesn't seem to work, especially the if-else statement inside the renderData function. How can I fix this code, or is there any way to handle this more gracefully, probably maybe inside the CSS?

I'm creating a react application, and I have a ponent that is define more or less like this:

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      loading: true,
      error: null
    };
  }

  ponentDidMount() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("LinkToAPI")
        .then(result => {
          _this.setState({
            data: result.data,
            loading: false,
            error: null
          });
        })
        .catch(err => {
          _this.setState({
            loading: false,
            error: err
          });
        });
  }

  ponentWillUnmount() {
    this.serverRequest.abort();
  }

  renderLoading() {
    return <div>Loading...</div>
  }

  renderError() {
    return (
      <div>
        Something when wrong: {this.state.error.message}
      </div>
    );
  }

  renderData() {
    const { error, data} = this.state;

    if (error) {
      return this.renderError();
    }

    return (
      <div>
        {data.map(d=> {
          if (d.imageUrl) {
            <div className="dataDiv" style="background: url('{d.imageUrl}')" key={d.Id}>{d.name}</div>
          } else {
            <div className="dataDiv" style="background: url('LinkToSomeImage')" key={d.Id}>{d.name}</div>
          }
        }
        )}
      </div>
    )
  }

  render() {
    return (
      <div className="App">
        {this.props.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
  }
}

It basically gets the JSON data from the API, and using it renders some divs with the data inside the JSON. I'm applying to the divs containing the data dataDiv class, which is define inside my App.css file. Additionally, I want to set a background image for the div. What exactly I want to do is that if the data entry includes a field named imageUrl I want to use that url as a url to the background image, otherwise, if it is null or empty, I want to use a default url that I found from the internet. What is a proper way to handle this in React? The code segment above doesn't seem to work, especially the if-else statement inside the renderData function. How can I fix this code, or is there any way to handle this more gracefully, probably maybe inside the CSS?

• javascript
• css
• reactjs

Share Improve this question Follow asked Aug 15, 2017 at 14:52 typostypos 6,6721515 gold badges4242 silver badges5555 bronze badges 7

• you can set a classname which is mapped to a specific background-url, or set {background-url: 'url'} on the element directly – Daniel Lizik Commented Aug 15, 2017 at 14:53
• @DanielLizik But, I'm getting the url basically from the API. How can I do this? – typos Commented Aug 15, 2017 at 14:54
• <div style={{backgroundUrl: this.state.url}}> – Daniel Lizik Commented Aug 15, 2017 at 14:55
• @DanielLizik Okay thanks. And how do you propose to handle the if-else part in the return statement, as it is the main one giving me error. – typos Commented Aug 15, 2017 at 14:59
• return a different ponent without style – Daniel Lizik Commented Aug 15, 2017 at 14:59

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

I would do like this Please make sure to check backgroundUrl equal to your desired CSS.

{data.map(d => {
  let backgroundUrl = "LinkToSomeImage";
  if (d.imageUrl) {
    backgroundUrl = d.imageUrl;
  } 
  
  return (
    <div className="dataDiv" style={{backgroundImage: `url(${backgroundUrl})`}} key={d.Id}>{d.name}</div>
  )
})}

EDIT

A full function would be:

renderData() {
  const { error, data} = this.state;

  if (error) {
    return this.renderError();
  }

  return (
    <div>
      {data.map(d => {
        let backgroundUrl = "LinkToSomeImage";
        if (d.imageUrl) {
          backgroundUrl = d.imageUrl;
        } 

        return (
          <div className="dataDiv" style={{backgroundImage: `url(${backgroundUrl})`}} key={d.Id}>{d.name}</div>
        )
      })}
    </div>
  )
}

          <Box
            onClick={() => {
              history.push({
                pathname: `/p/c/${data.ProductName.replace(/\//g, "~")}/1`
              });
            }}
            css={{
              backgroundImage:`url(${data.imageUrl||"/default-placeholder.png"})`,
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat'
            }}
          >

本文标签： javascriptHow to set the background image for a div in ReactStack Overflow