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

Question

假设我有以下组件

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

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

我想根据 variant 属性的值动态加载相应的图像。

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

方案一：使用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 是最适合您的方法。

请记住，在 switch/case 方法中，您将评估所有情况，直到您的选项匹配为止，就像您有一堆 if 一样。选项 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" />
}

那么，你只需要访问key-value如下的位置：

const SomeComponent = () =>{

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

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

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

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

gatsby-plugin-image Load image with the given prop

reactjs

gatsby

gatsby-image

gatsby-plugin