Javascript 未加载到React中的图像

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

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.Component{
render（）{
返回(
你好
);
}
}
导出默认应用程序；

您可以通过阅读了解它不起作用的原因

如果您使用以下方法

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;

从“/home/priyanka/Finalproject/src/components/3.jpg”导入img；
类应用程序扩展了React.Component{
render（）{
返回(
你好
);
}
}
导出默认应用程序；

如果您使用的是

webpack

，则在提到

img

标签的

src

时，需要使用

require

。此外，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;

---

假设您的

images

文件夹位于

public

文件夹中

尝试：

请记住，您处理的是JSX非纯HTMLHope此答案可帮助您解决[React image/asset management]（）在./src/components/3.jpg模块解析失败：/home/priyanka/Finalproject/src/components/3.jpg意外字符中出错的问题�' （1:0）您可能需要一个合适的加载程序来处理此文件类型。是否确定IMG的路径正确且与组件相关
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;