在 Gatsby 的 StaticImage 中使用动态外部 url答案

【问题标题】：Using dynamic external urls in StaticImage in Gatsby在 Gatsby 的 StaticImage 中使用动态外部 url
【发布时间】：2021-06-13 05:01:12
【问题描述】：

我正在尝试从包含图像 url 的对象数组中显示几个图像。我知道 StaticImage 必须接受局部变量作为道具值。图片网址的这两个变量都是本地的。为什么这不起作用，是否有解决方法？

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const TestPage = (props) => {
  const itemData = [
    {
      img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110?w=161&fit=crop',
      title: 'Bed',
    },
    {
      img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3?w=161&fit=crop',
      title: 'Kitchen',
    },
  ];

  const testSrc = 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?w=161&fit=crop';
  const testSrc2 = itemData[0].img;

  return (
    <>
      <StaticImage src={testSrc} alt="works" />
      <StaticImage src={testSrc2} alt="doesn't" />
    </>
  )
}

export default TestPage;

【问题讨论】：

标签： gatsby gatsby-image

【解决方案1】：

正如你所说，有一个restriction in the component：

使用StaticImage的限制

图像是在构建时加载和处理的，所以有对如何将 props 传递给组件的限制。需要的价值观在构建时进行静态分析，这意味着你不能通过它们作为来自组件外部的道具，或使用的结果例如函数调用。您可以使用静态值，或者组件本地范围内的变量。请参阅以下内容例子：

在您的情况下，普通分配有效，但对象分配无效。将其更改为：

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const TestPage = (props) => {
  const testSrc = 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?w=161&fit=crop';
  const testSrc2 = 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3?w=161&fit=crop';

  return (
    <>
      <StaticImage src={testSrc} alt="Bed" />
      <StaticImage src={testSrc2} alt="Kitchen" />
    </>
  )
}

export default TestPage;

【讨论】：