导入图像作出反应

Question

我给我的组件2道具src和ALT键，以便它可以显示像这样的图像：

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

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

Error: Cannot find module "."

我试过图片网址，它是正确的，并且工作，当我提供需要道具时，应用程序就不想工作。

Answer 1

如果您使用的是webpack，我会假设您使用的是webpack图片加载器。如果是这种情况，这意味着你正在将组件导入图像，可能使用了命名导入。在这种情况下，您可以将指定的导入作为通道传递给子组件，也可以直接在导入所在的组件上使用它。

// 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是如何处理你的分量的图像。