イメージは実際にはロードされていません

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を使用している場合、あなたはsrcimgのタグを言及しながら、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; 

あなたは{}内の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;