Reactjs local image not loading

Question

我在我的reactjs文件中本地加載映像時遇到問題。任何幫助都是極好的。由於

無法編譯 ./src/components/pages/home.js

模塊未發現：在「C無法解析 '../Assets/images/Thomas-overlay3.jpg'： \ Users \ tcmar \ Documents \ ThomasWebsite \ mywebsite \ src \ components \ pages'

此錯誤發生在構建時間期間，無法解除。

我的代碼：

import React, { Component } from 'react'; 

class Home extends Component { 
    render() { 
    return (
     <div className="container"> 
     <div className="hero-image"> 
      <img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" /> 
     </div> 
     <div className="hero-text"> 
      Hello, My Name is <span>Thomas</span> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Home; 

Answer 1

你的資產應該在其中擔任是服務器的一些public/文件夾。

然後，你可以參考實際的資源：

... 
<img src="/assets/my-image.jpg" /> 
... 

或者，你可以使用webpacks file-loader並加載它想：

<img src={require("file-loader!./file.png")} /> 

然而，這將加載該文件，併發出副本在公共文件夾中自動，如果這是你想要的。

更多信息：https://github.com/webpack-contrib/file-loader