当没有可用的图像时，我正在尝试在react中为我的应用程序创建占位符图像

Question

我正在用reactjs开发一个电影浏览器应用程序，使用moviedb的api返回带有电影和相应海报的Json文件。一些影片返回空的海报路径，因为没有海报可用，所以我尝试编写一个条件语句来使用占位符，但这似乎不会影响poster_src.I，将影片放入一个数组中，并通过循环显示每个影片。

当我查询一部电影时，海报是返回为poster_src，但是因为有些电影没有海报，所以它返回没有图像的https://image.tmdb.org/t/p/w185null，所以我尝试检查poster_src是否等于字符串，如果是真的，则将其更改为占位符。

我的查询是返回电影列表并将其放入数组中。

$.ajax({
    url: urlString,
    success: (searchResults) => {
        console.log("Fetched data")
        const results = searchResults.results
        console.log(searchResults)

        var movieRows = []

我的条件语句来查看海报是否等于死链接，如果是，则将其更改为占位符图像。

if (movie.poster_src === "https://image.tmdb.org/t/p/w185null")
{
    movie.poster_src = "https://critics.io/img/movies/poster-placeholder.png";
}
return poster_src;

我只希望简单地根据返回的内容更改poster_src，然后希望用默认占位符替换图像。我在网上看到的任何东西似乎都不能解决我的问题，所以我想知道是否有人会看到这个问题，因为它可能是非常小的问题。

Answer 1

您不需要遍历数据集来更改图像src。相反，您可以使用条件渲染来显示正确的图像。

拨打电话：

let _this = this;
$.ajax({
  url: urlString,
  success: (searchResults) => {
      console.log("Fetched data")
      _this.setState({
        movieRows: searchResults.results
      })
   }
})

然后渲染视图

render() {
  var movies = this.state.movieRows.map(x => {
    let img = x.poster_src == "https://image.tmdb.org/t/p/w185null" ? "https://critics.io/img/movies/poster-placeholder.png" : x.poster_src
    return (
      <div>
        <img src={img} />
      </div>
    )
  })
  return (<div>{movies}</div>)
}