Image not showing


Topic: Image not showing

romsonic asked 6 years ago

Hi All,

What is the right way to show images with MDB React?

For some reason the images are not showing in my React app combined with mdbreact.

This is the line of code used:

<img
                            src="/src/img/retina.png"
                            id="icon1"
                            alt="Product"
                            class="bigEntrance"
                        />

The repo can be found here: https://github.com/Romson/Creative-Portfolio/blob/master/src/components/aboveFooter.js


Konrad Stępień staff answered 6 years ago

Hi @romsonic,

Seems your problem is wrong export component. Try to change export const AboveFooter = () => { for const AboveFooter = () => { and at the end of the code writeexport default AboveFooter

like this

import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

const AboveFooter = () => {
  return (
    <section className="aboveFooterRow">
      <MDBContainer>
        <MDBRow className="portfolioRow">
          <MDBCol md="4">
            <div className="iconHeading">
              <img
                src="/src/img/retina.png"
                id="icon1"
                alt="Product"
                className="bigEntrance"
              />{" "}
              About me
            </div>
            <p className="grey-text">
              Hi, my name is Romero. I am a web developer based in Rotterdam. I
              love creating things that make people smile. I'm passionate about
              the environment and my hobbies are football and cycling.
            </p>
          </MDBCol>

          ...

        </MDBRow>
      </MDBContainer>
    </section>
  );
};

export default AboveFooter

you can also change class for className to fix error in your console.

Your regards, Konrad.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.17.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes