图像未在React中加载 [英] Images not loading in React

问题描述

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

not able to display the image getting an error as not found but i have provided the full path for it. I don't know where i am going wrong.

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;

推荐答案

如果您使用 webpack ，你需要使用 require ，同时为提及 src img 标签。此外，url必须相对于组件。

If you are using webpack, you need to use require while mentioning the src for img tag. Also the url must be relative to the component.

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值包装在 {}中将起作用

If you are not using webpack then simplly wrapping the src value within {} will work

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;

这篇关于图像未在React中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！