如果没有标志，如何隐藏标志？

如何解决如果没有标志，如何隐藏标志？

我正在使用 react-bootstrap Thumbnails 来显示一堆徽标。

如果没有徽标，那么我将设置默认徽标。

但现在我希望默认标志也不应该显示。 所以，如果我删除默认标志，那么我会得到分解图像。

代码如下 -->

function ExpoCard({
  data
}) {
const {logo} = data;
let defaultlogo = 'defaultlogo.png';
const URL = `${CLOUDINARYURL}/${isdisplayPage ? displayImgConfig : imgConfig}/${IMAGE_URL}${logo || defaultlogo}`;

  <Thumbnail
            src={URL}
            alt={name}
            onClick={() => setData && setData(data)}
            className={cx('expo-card-thumbnail',setData && !isdisplayPage && 'cursor exhibitor-logo-portal-page')}
          >
            {!hideBoothName && (
              <div
                className={cx(
                  boothSize === 'LARGE' || boothSize === 'MEDIUM' ? 'expo-title-large' : 'expo-title-small','ex-title-name',)}
                style={{ color: nameColor || '#000000' }}
              >
                <LinkWithTooltip isText tooltip={name} placement="top">
                  {name}
                </LinkWithTooltip>
              </div>
            )}

            {categoryName && <div className="ex-tag-line">{categoryName}</div>}
            <div>
              {shortDescription && (
                <>
                  <LinkWithTooltip isText tooltip={shortDescription} placement="top">
                    <div className="expo-card-desc-container m-t-5">
                      <div
                        className={cx(
                          boothSize === 'LARGE'
                            ? 'expo-card-desc-large'
                            : boothSize === 'MEDIUM'
                            ? 'expo-card-desc-medium'
                            : 'expo-card-desc-small','expo-card-desc',)}
                        style={{ color: shortDescriptionColor || '#000000' }}
                      >
                        {shortDescription}
                      </div>
                    </div>
                  </LinkWithTooltip>
                </>
              )}
            </div>
            <div className="card-footer">
              {isShowAvailability && !isdisplayPage && !disableChat && !isSearching && status && (
                <span className={cx('ex-status-label',status)} style={{ position: 'absolute' }}>
                  {status}
                </span>
              )}
              {!isdisplayPage
                ? data.sponsorUrl !== '' && (
                    <a
                      className="viewExpoBtn"
                      role="button"
                      tabIndex="0"
                      aria-label={name}
                      onKeyPress={(e) => e.key === 'Enter' && setData && setData(data)}
                    >
                      <i className="ac-icon-arrow-right pull-right btn" />
                    </a>
                  )
                : (data.linkToSite || data.sponsorUrl) && (
                    <a
                      className="viewExpoBtn"
                      role="button"
                      tabIndex="0"
                      aria-label={name}
                      onKeyPress={(e) => e.key === 'Enter' && setData && setData(data)}
                    >
                      <i className="ac-icon-arrow-right pull-right btn" />
                    </a>
                  )}
            </div>
          </Thumbnail>
}

我正在考虑创建一个类 display-none 并且当没有徽标时，Thumbnail 应该添加 display-none 类，但如果我这样做，所有内容都会被隐藏，包括名称。

解决方法

有几个选项：

1. 与其隐藏缩略图本身，不如使用 CSS 子选择器隐藏其中的 IMG 元素。 您可以执行以下操作：

   .hide-thumbnail >img{
      display:none;
   }
   

当您不想显示图片时，将此 hide-thumbnail 类添加到 Thumbnail。

2. 将 0 尺寸图片设置为默认徽标： 您可以在 Windows 上的 Paint 中创建一个空图片并将其用作默认图片
3. 将缩略图中的所有内容移到不同的组件中，并仅在需要时在新组件中显示缩略图。

选项 1 和 2 不是很好，但可以作为快速解决方案。