Question

我正在尝试根据通过道具传递的URL为子组件呈现不同的背景图像。

背景图片存储在public文件夹下的images文件夹中

public/images/bg_1.jpg

当前我有这个：

父组件

import React from "react";
import Nav from "./Nav";
import SubNav from "./SubNav";
import Footer from "./Footer";
import PageHero from "./PageHero";
import backgroundImage from '../../public/images/bg_1.jpg';

const MainPage = () => (
  <div>
    <Nav />
    <SubNav company="Main Company" />
    <PageHero BackgroundURL={backgroundImage}/>
    <Footer />
  </div>
);

export default MainPage;

子组件（PageHero）

import React from "react";

export class PageHero extends React.Component {
  render(props) {
    return (
      <div>
        <div
          class="page-hero uk-light"
          style={{ backgroundImage: `url(${props.BackgroundURL})` }}
        >
          <div class="uk-container uk-container-medium uk-text-center">
            <h1 class="uk-heading-primary page-hero__header uk-animation-fade">
              Page Heder
            </h1>
          </div>
        </div>
      </div>
    );
  }
}

export default PageHero;

但是当我尝试链接src时出现此错误：

./public/images/bg_1.jpg中的
错误您可能需要适当的加载程序来处理此文件类型。

这可能是webpack或我引用图像的方式的问题吗？

反应传递图像URL到子组件

0 个答案: