小编And*_*sky的帖子

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

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;