Issue

This Content is from Stack Overflow. Question asked by Dumbledore

I used default create-react-app to create a react app. However, when i try to add cards that contain pictures my image does not render. I get a white screen….
My image is located in a folder in src called Images. The rest works until I add in the Card prop and then the screen goes fully white. So I suppose that means it is not working or rendering properly.

import React from 'react';

export default function Card(props) {

    return (
       <div className="card">
           <img src={require("./Images/monstera.jpeg")} alt="monstera"></img>
           <div className="card-stats">
                <p>{props.name}</p>
                <p>{props.price}</p>
           </div>
       </div> 
    )
}

import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';




function App() {
 
  return (
    <div className="App">
      <Header></Header>
      <div className="row">
        <Inventory>
          <div className="cards-list">
            <Card>
            </Card>
          </div>
        </Inventory>
        <Cart></Cart>
      </div>
    </div>
  );
}

export default App;

Is there something I am doing wrong? Is there a special way to render a react app with an image?

Solution

look for any error through console and try cleaning your code a little

turn this

    function App() {
     
      return (
        <div className="App">
          <Header></Header>
          <div className="row">
            <Inventory>
              <div className="cards-list">
                <Card>
                </Card>
              </div>
            </Inventory>
            <Cart></Cart>
          </div>
        </div>
      );
    }

    export default App;

into this

function App() {
 
  return (
    <div className="App">
      <Header />
      <div className="row">
        <Inventory />
          <div className="cards-list">
            <Card />
          </div>
        <Cart />
      </div>
    </div>
  );
}

export default App;

if not required don’t use so many div

This Question was asked in StackOverflow by Dumbledore and Answered by newtocodeing It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.