Question

我正在使用moviedb的api在reactjs中开发电影浏览器应用程序，以返回包含电影及其相应海报的Json文件。有些电影返回的海报路径为null，因为没有可用的海报，所以我尝试编写条件语句来使用占位符，但似乎并没有影响poster_src。我将这些电影放到数组中并通过循环。

当我查询电影时，海报返回为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>)
}

我正在尝试为我的应用制作一个占位符图像，以在没有可用图像时做出反应

1 个答案: