Question

我正在给我的组件2道具src和alt，以便它可以显示如下图像：

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

运行我的应用程序会给我这个错误

错误：找不到模块＆＃34;。＆＃34;

我尝试了图片网址，这是正确无误的，当我提供道具时，应用程序根本不想工作。

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如何处理组件中图像的更多信息。

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

1 个答案: