当api不返回图像URL时，使用React进行条件渲染

Question

我正在处理从Newsapi.org上读到的数据。问题是有时我得到新闻标题但图像url返回null。

我这样做是为了进行条件渲染，所以当返回变量为null时它会显示另一个图像。当响应为空时，它不显示替换图像。

<div class="col-2">
          { article.urlToImage != 'null' ? 

            <a href={article.url} class="thumbnail">
              <img src={article.urlToImage} class="img-fluid" />
            </a>
          : 
            <a href={article.url} class="thumbnail">
              <img src="http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg" class="img-fluid" />
            </a>
          }  
</div>

Answer 1

'null'是字符串，你用字符串检查。将'null'更改为null对象。

{ article.urlToImage != null ? 

但是，我只想这样做：

<a href={article.url} class="thumbnail">
  <img src={article.urlToImage || 'default-path-of-the-image' } class="img-fluid" />
</a>

这满足如果article.urlToImage为null或未定义使用默认图像default-path-of-the-image否则使用来自article.urlToImage的图像。

Answer 2

更好的代码将是：

<div class="col-2">
        <a href={article.url} class="thumbnail">
          <img src={article.urlToImage != 'null'? article.urlToImage : 'http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg' } class="img-fluid" />
        </a>     
</div>