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;

- Abhilash Muttalli

---

<Image source={require('./img/favicon.png')} /> 更多信息 请记住，您正在处理JSX而不是纯HTML。 - Marina Dunst

希望这个答案能对你有所帮助 [React 图片/资源管理] (https://dev59.com/5FsW5IYBdhLWcg3wyZsw#61783390) - Mokesh S

Answer 1

如果你正在使用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;

如果您没有使用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;

- Shubham Khatri

---

你确定 IMG 的路径是正确的并且相对于组件吗？ - Shubham Khatri

Answer 2

假设您的images文件夹位于public文件夹内, 请尝试以下方法:

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

使用这种方法，可以正确显示public文件夹内的图像。

- Dory Daniel

---

有时候，有些人就像你生命中的天使，现在你和你的回答正在扮演着这样的角色。如果我说“非常感谢你”，那还不足以表达我的感激之情。 两天后，在这个网站上阅读了不同的解决方案后，我的眼睛终于发现了这个宝贵的答案。 - Matin

永不放弃希望，你总会找到解决问题的方法。你可能会面临更多的困难，只需休息或散步一下...然后进行研究。祝好运! - Dory Daniel

Answer 3

如果您使用以下方法

您可以阅读为什么不能使用 <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;

- js_248

---

在./src/components/3.jpg中出现错误 模块解析失败：/home/priyanka/Finalproject/src/components/3.jpg出现意外字符'�'（1:0） 您可能需要一个适当的加载器来处理此文件类型。 - Abhilash Muttalli

可能需要使用适当的加载器处理Webpack和Babel中出现的文件类型。 - js_248