当图像路径由 props 确定时，Gatsby 无法渲染背景图像

Question

我正在处理一个 Gatsby 项目，但运行遇到了一个令人沮丧的问题。我有一个组件接收图像的相对路径作为道具，然后我用它来填充 background-image 属性:

import React, { FC } from 'react'

// Prop typings
type TProps = {
  imageUrl: string;
}

const MyComponent: FC<TProps> = ({ imageUrl }) => {

  const divStyles = {
    backgroundImage: `url(${imageUrl})`,
  }

  return (
    <div style={divStyles}></div>
  )
}

export default MyComponent

传入 imageUrl 的相对路径引用了我的 src 目录中的图像。我已经仔细检查了路径是否正确并且图像存在，但是当组件渲染时图像不会出现。

我可以使用 CSS 成功设置背景图像，但是当图像路径作为道具传递时它失败了。我还尝试使用 Gatsby 的 withPrefix 效用函数设置图像 URL，但没有骰子。

我是不是做错了什么，或者根本不可能在 Gatsby 中从 props 定义背景图像？

Answer 1

Am I doing something wrong, or is it just impossible to define a background image in Gatsby from props?

您应该能够像任何其他 React 项目一样。

我认为您可能面临的唯一问题是路径的相对性。在不知道当前有问题的路径 (imageUrl) 或您的项目结构如何的情况下很难猜测，但请尝试类似的方法：

import React, { FC } from 'react'

// Prop typings
type TProps = {
  imageUrl: string;
}

const MyComponent: FC<TProps> = ({ imageUrl }) => {

  const divStyles = {
    backgroundImage: `url(../${imageUrl})`,
  }

  return (
    <div style={divStyles}></div>
  )
}

export default MyComponent

Answer 2

如果您想显示这样的图像，这不是 Gatsby 问题，而是 React 相关问题。

这是在 React 中导入图像并将其传递给 props 的正确方法：

// Parent component
import image from "../relative/path/to/image";

<MyGreatComponent image={image} />

// MyGreatComponent

export default function MyGreatComponent({ image }) {
const divStyles = {
    backgroundImage: `url(${image}`,
  }

  return (
    <div style={divStyles}></div>
  )
}

参考：https://create-react-app.dev/docs/adding-images-fonts-and-files/

祝您黑客愉快！

当图像路径由 props 确定时，Gatsby 无法渲染背景图像

Gatsby unable to render background-image when image path determined by props

javascript

reactjs

gatsby