導入圖像作出反應

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是如何處理你的分量的圖像。