javascript - 在 React 中使用 this.props.src 导入图像

Question

我为我的组件 2 提供了 src 和 alt 属性，以便它可以显示如下图像:

<img src={require(this.props.src)} alt={this.props.alt} />

运行我的应用程序会出现此错误

Error: Cannot find module "."

我尝试了图像 URL，它是正确的并且可以工作，但应用程序只是在我提供需要的 Prop 时不想工作。

Answer 1

如果您使用 webpack，我将假设您使用 webpack 图像加载器。如果是这种情况，则意味着您正在组件中导入图像，可能使用命名导入。在这种情况下，您可以将命名导入作为 prop 传递给子组件，或者直接在导入所在的组件上使用它。

// named import
import landscape from "./img/landscape.jpg";
// child component
import Child from "./components/child";

const Parent = () => 
  <div>
    <Child src={landscape} />
  </div>;


// then the child component could look like this
const Child = (props) => 
  <div>
    <img src={props.src} />
  </div>;

如果情况并非如此，请提供有关 webpack 如何处理组件中的图像的更多信息。