图像未在 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

您可以阅读Why can't I do <img src="C:/localfile.jpg">? 了解它为什么不起作用。

如果你使用以下方法

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 2

如果您使用webpack，则需要使用require，同时为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;

Answer 3

假设您的images 文件夹位于public 文件夹中。

尝试：

<img src={process.env.PUBLIC_URL + "/images/dog.png"}