Question

我试图获取默认图片以显示我不确定哪里出错了我认为添加一个if语句来显示它的null是否有效（我添加了我认为它去了的地方但是它不起作用）只是不确定我在哪里出错了。我想知道我是在把它放在错误的地方或者什么地方，或者我是否必须改变我未申报的状态。

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

    this.state = {
      title: '',
      date:'',
      overview: '',
      poster: '',
      vote: ''
    }
    this.getFilm=this.getFilm.bind(this);
  }

 movieID(){
  var maxNumber = 284054;
  var randomNumber = Math.floor((Math.random()* maxNumber )+1);
  return randomNumber
}
getImgUrl (image) {
  return 'https://image.tmdb.org/t/p/w500/' + image;

  if(image !== "null"{
    $('img').att('src', image);
  })
}

  getFilm = () => {
    const newMovieID = this.movieID()
    const url = `https://api.themoviedb.org/3/movie/${newMovieID}?api_key=${apikey}`
    axios.get(url)
    .then(data => {
      let res = data.data;
      console.log(res);
      this.setState({
        title: res.title,
        date: res.release_date,
        overview: res.overview,
        poster: res.poster_path,
        vote: res.vote_average

      })
    })
    .catch(err => {
      console.log('error')
    })
  }

  render() {
    console.log(this.state.poster);
    return (
      <div >
      <h1 className="tagline"> Lets see what you got</h1>

      <div className="main">

        <div className="poster"name="poster_path">
        <img  className=" image" src={this.getImgUrl(this.state.poster)} alt="picture" />
        </div>
      <div className="content">
        <h1 name="title">{this.state.title}</h1>
        <hr/>
      <p name="date">Release date:{this.state.date}</p>
      <p name="overview">Description:{this.state.overview}</p>
        <p name="vote_average">Vote:{this.state.vote}</p>
      </div>

      </div>
      <div className="btn-area">
      <button className="btn" onClick={this.getFilm}>Get Movie</button>
      </div>
      </div>
    );
  }
}

export default RandomFilm;

Answer 1

您不需要jQuery来设置默认的图像源。工作fiddle

getImgUrl (image) { 
    if (image === null) { 
        return '/noimage.jpeg';
    }
     return 'http://image.tmdb.org/t/p/w500/'; + image; 
}

注意：将您的初始海报值也设置为空。

this.state = {
      title: '',
      date:'',
      overview: '',
      poster: null,
      vote: ''
    }

Answer 2

您不需要使用jquery，您可以在构造函数中设置您所在州的imageIsNull: true和image: ""属性，然后在getURL函数中执行：

  if(image !== "null"){
    this.setState({image, imageIsNull : false})
  })

然后在render()中使用条件渲染，如下所示：

{ if(!this.state.imageIsNull) { return(<img src={this.state.image}>) }

尝试添加默认图像/ if image = null reactjs

2 个答案: