我正在写一个从Mongo Atlas获取数据的博客，这个页面位于Vercel上的NextJS9.5.4中。博客页面使用静态道具和再生

数据以JSON的形式出现，所有内容都是字符串化的。

 return {
      props: {
        articles: JSON.parse(JSON.stringify(articles)),
      },

博客文章都有标题，文字和署名行（作者和日期），有些文章有链接，有些文章有一两张图片。该法典的有关部分如下:`

{articles.map((article) => (
      <li key={article.id}>
      <h2  className={styles.blogtitle} >{article.title}</h2>
      <p  className={styles.blogtext}>{article.text}</p>
      <img src={article.image1} className={styles.blogimage} alt={article.alt1} ></img>
      <img src={article.image2} className={styles.blogimage} alt={article.alt2} ></img>
      <p>{""}
      <a
       href={article.link} 
      title={article.link}
      target="_blank"
      rel="noopener noreferrer" >
      {article.link}            
      </a>
      </p>
      <p  className={styles.bloginfos}>{article.author}, le {article.date.slice(0,10)} à {article.date.slice(11,16)} h</p>
      </li>
    ))}

当我添加了图片和链接，所有没有图片或链接的帖子显示为2个图像和一个链接的空行。浏览器检查器显示每个列表条目都获得一个；
，否则为空标记和包含

<a target="_blank" rel="noopener noreferrer"></a>

（至少它不会在新标签中添加空链接）

如何避免这些空行？我假设图像行是通过Next添加独立于内容的类来创建的。但是空段落没有内容，也没有特定的类，不应该在HTML中显示。整个项目都在GitHub上，这个页面是blog.js。