Изображения не загружаются в 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 при упоминании о src для img тега. Также 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 то simplly оберточной значение 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;