React，在循环中判断并渲染＜img＞标签，只有当图片地址存在时才显示图片

在循环中判断并渲染标签，只有当图片地址存在时才显示图片，可以使用条件语句来实现。以下是一个示例：

import React from 'react';

function MyComponent() {
    
    
  const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片地址数组

  return (
    <div>
      {
    
    imageUrls.map((imageUrl, index) => (
        <div key={
    
    index}>
          {
    
    imageUrl && <img src={
    
    imageUrl} alt={
    
    `图片 ${
      
      index + 1}`} />}
        </div>
      ))}
    </div>
  );
}

export default MyComponent;

在上述示例中，我们假设有一个imageUrls数组，其中包含了多个图片地址。通过使用map()方法遍历数组，我们在循环中判断每个图片地址是否存在。

如果imageUrl存在（非空字符串），则渲染带有正确的src和alt属性的标签。如果imageUrl不存在（为空字符串或未定义），则不会渲染标签。

在循环中，我们为每个渲染的元素提供一个唯一的key属性，这里我们使用index来作为key。确保在实际应用中使用适当的唯一标识作为key。

根据你的实际需求和数据结构，调整示例中的图片地址数组和循环逻辑。