gatsby-plugin-image 使用给定的道具加载图像

Question

考虑我有以下组件

// variant can be one of [facebook, google, apple, ...etc]
<CompanyLogo variant="facebook"/>

variant 的可能值的数量是有限的。

我想根据variant prop的值动态加载对应的图片。

现在，我想到了两种方法。

方案一：使用 GraphQL 查询所有公司 logo 图片并使用 JS 找到我需要的。

const { images: { edges: images } } = useStaticQuery(graphql`
    query {
      images: allFile(filter: {
        sourceInstanceName: {eq: "images"}, 
        relativeDirectory: {eq: "companies"}
      }) {
        edges {
          node {
            name
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  `);

const image = images.find(({ node: { name } }) => variant === name );

我担心的是我不确定这是否会极大地影响性能，尤其是在有很多公司徽标的情况下。

选项2：使用switch或if条件加载图片

switch (variant) {
  case 'facebook':
    return <StaticImage src="facebook.png" />
  case 'apple':
    return <StaticImage src="apple.png" />
  // ...etc
}

问题是代码真的很臭。

您有更好的方法来实现这一目标吗？

Answer 1

在这两种方法中，选项 1 是最适合您的方法。

请记住，在切换/案例方法中，您将评估所有案例，直到您的选项匹配，就像您有一堆 ifs 一样。选项 2 是性能最低的方法。

我会添加第三个试用版，我认为它是性能最好的字典（地图）：

const LOGO_VARIANTS = {
 facebook: <StaticImage src="facebook.png" />,
 apple: <StaticImage src="apple.png" />,
 potatoes: <StaticImage src="potatoes.png" />,
 'dashed-logo':  <StaticImage src="dashed-logo.png" />
}

然后，您只需要使用如下键值访问位置：

const SomeComponent = () =>{

   return <div>My logo is {LOGO_VARIANTS['facebook']}</div>
}

注意：调整该逻辑以使其适应您的需求，例如将 LOGO_VARIANTS['facebook'] 分配给新变量并将其呈现为：const Image= LOGO_VARIANTS['facebook']，然后是 <Image/>

我不确定整个逻辑，这种方法可能不是您的最佳/最佳解决方案。如果您不想过度使用逻辑，我会使用选项 1，它比选项 2 好得多。