时间戳

首页 > 解决方案 > 当 api 不返回图像 url 时使用 React 进行条件渲染

reactjs - 当 api 不返回图像 url 时使用 React 进行条件渲染

问题描述

我正在处理从 Newsapi.org 读取的数据。问题是有时我得到新闻标题，但图像 url 返回 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>

标签： reactjs

解决方案

'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。

推荐阅读