Question

我正在处理从Newsapi.org读取的数据。问题在于，有时我会获得新闻标题，但图片网址返回null。

我这样做是为了进行条件渲染，因此当return变量为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为空或未定义，则使用默认图像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>

当API不返回图片网址时，使用React进行条件渲染

2 个答案: