如何在Reactjs中从数据库中获取数据时控制img属性src

编程问答 2022-06-06

问题描述

我正在创建与文章相关的项目。我们可以由多位作者撰写一篇文章。在这种情况下，我想在网页上显示图像，如果它具有src，如果它没有src，则显示为空。我使用axios对数据进行了填充

<img className="userpic" src={item.author[0].picture} alt="" />
<img className="userpic" src={item.author[1].picture} alt="" />
<img className="userpic" src={item.author[2].picture} alt="" />

当前上面的代码正在工作，因为在作者表中所有id都有图片。但是假设如果author [2]中没有图片，那么我会在控制台上收到错误消息

Uncaught TypeError: Cannot read property 'picture' of undefined

我们如何解决呢？

解决方法

<img className="userpic" src={item.author[0] ? item.author[0].picture : 'default_image_url'} alt="" />
,

尝试使用默认图片

const image = item.author[0].picture 
<img src={image === 'undifiend'
 ?  // put the path of default image
: 
image} class="img-fluid" />
axiosdjangodjango-modelsreactjsreactjs