-1

I am trying to display a pic inside a card but it does not work... actually I only see instead of the pic the attribute alt but I don't see the pic...

Here is my code :

import React, {Component} from "react";
import classes from "./cards.css"

const Cards = (props) => {
    return (
        <>
            <div  id="card" className={"card text-white bg-info mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                    <img src="myPicture.jpg" className="card-img-top" alt="pic" />
                <div className="card-body">
                    <h4 className="card-title">This is a test</h4>
                </div>
            </div>
        </>
    )
}

export default Cards;

Do you know how can I do to see my pic on my card ?

Thank you a lot for your help !

Peter
  • 105
  • 3
  • 10
  • It's showing the `alt` text because it's not loading. We'll need more information about your configuration in order to troubleshoot. You should also be getting an error for this. – Ouroborus Nov 26 '20 at 23:24
  • Probably the path to the image inside `src` is wrong. – acincognito Nov 26 '20 at 23:24
  • Try this, might help you https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react – JCastillo Nov 26 '20 at 23:29

3 Answers3

0

Have you checked that the image has loaded correctly? You can use the inspector 'network' tab. Make sure the image is being loaded by the page. It will likely be red if it is not found (in the inspector).

dean glükler
  • 173
  • 1
  • 7
0

If you're using webpack, try this:

import backgroundImage from './myPicture.jpg';

// all other code

return (
 <div>
  <img src={backgroundImage} alt="Background image" className="image" />
 </div>
)

Config required in webpack:

module.exports = {
 // other config
 module: {
  rules: [
    // other rules
    {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader'
    },
  ]
 }
}

You need to install file-loader package

Tabrez Basha
  • 172
  • 1
  • 5
-1

Add this

import BackgroundImage from './myPicture.jpg';
    
<img src="{require('./myPicture.jpg')}" className="card-img-top"alt="pic" />
Jenil Narola
  • 1
  • 3