在React中未加载图像

Question

无法将获取错误的图像显示为未找到，但我已为其提供了完整路径。我不知道我错在哪里。

class App extends React.Component {

   render() {
      return (
               <div>
                  <h1> hello</h1>    
                <img src="/home/priyanka/Finalproject/src/components/3.jpg" alt="cannot display"/>    
              </div>    
           );
         }
  }

export default App;

Answer 1

假设您的图像文件夹在公共文件夹中。

尝试：

Answer 2

你能读为什么我不能读

如果您使用以下方法

import img from "/home/priyanka/Finalproject/src/components/3.jpg";
class App extends React.Component {



   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={img} alt="cannot display"/>

         </div>

      );
   }
}

export default App;

Answer 3

如果您使用的是webpack，您需要使用要求，同时提到img标记的src。此外，url必须相对于组件。

class App extends React.Component {

   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={require("./home/priyanka/Finalproject/src/components/3.jpg")} alt="cannot display"/>

         </div>

      );
   }
}

export default App;

如果您没有使用webpack，那么简单地将src值包装在{}中就可以了

class App extends React.Component {

   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={"./home/priyanka/Finalproject/src/components/3.jpg"} alt="cannot display"/>

         </div>

      );
   }
}

export default App;