React <img src=“#”/> tag in not showing image in the browser

Question

Hello there It seems Basic but i'm lost.

tag is showing the alternate name for the image in the browser but not the image.

here is the image and code for that portion.

logo is it on it's position but not showing image of logo.

portfolio.js

const educationInfo = {
    display: true,
    schools : [
        {
            schoolName : "University of Engineering and Technology, Peshawar",
            logo: require("./assets/images/uet.png"),
            subHeader : "Bachelor of Electrical and Electronics Engineering",
            duration : "Aug 2016 to Oct 2020",
            desc : "Completed Bachelors with good grades, participated in multiple small 
               projects and successfully completed FYP on Commercial scale",
            descBullets : ["FYP: Raspberry-Pi based Cheque and Cash Deposit machine with 
               digital Wallet"]
         },
       ]
    };

EducationCard.js

import React,{createRef, useContext} from 'react'
import './EducationCard.css';
import StyleContext from '../../contexts/StyleContext';
import { Slide, Rotate } from 'react-reveal';
import { educationInfo } from '../../portfolio';

export default function EducationCard({school}){
     const {isDark } = useContext(StyleContext);
     const imgRef = createRef();
        
       #//..............

      <div className="education-card-left">
          <img
             crossOrigin={"anonymous"}
             ref={imgRef}
             className="education-roundedimg"
             src={educationInfo.schools.logo}
             alt={educationInfo.schools.schoolName}
             />
      </div>

Answer 1

Add the below line for importing image

import Logo from <image path>

And use it for image src

 <div className="education-card-left">
      <img
         crossOrigin={"anonymous"}
         ref={imgRef}
         className="education-roundedimg"
         src={Logo}
         alt={educationInfo.schools.schoolName}
         />
  </div>

Answer 2

import image by:

import Logo from "./assets/images/uet.png"

and use Logo in source of image tag.

Answer 3

require inside of an object is unheard of. Here are a few things you can try:

1. Require/ Import your image on the top. Use it inside the object.

portfolio.js

import Logo from "./assets/images/uet.png";

const educationInfo = {
    display: true,
    schools : [
        {
            schoolName : "University of Engineering and Technology, Peshawar",
            logo: Logo,
            subHeader : "Bachelor of Electrical and Electronics Engineering",
            duration : "Aug 2016 to Oct 2020",
            desc : "Completed Bachelors with good grades, participated in multiple small 
               projects and successfully completed FYP on Commercial scale",
            descBullets : ["FYP: Raspberry-Pi based Cheque and Cash Deposit machine with 
               digital Wallet"]
         },
       ]
    };

Or else, what you can do is use eval , like:

const educationInfo = {
    display: true,
    schools : [
        {
            schoolName : "University of Engineering and Technology, Peshawar",
            logo: eval('require("./assets/images/uet.png")'),
            subHeader : "Bachelor of Electrical and Electronics Engineering",
            duration : "Aug 2016 to Oct 2020",
            desc : "Completed Bachelors with good grades, participated in multiple small 
               projects and successfully completed FYP on Commercial scale",
            descBullets : ["FYP: Raspberry-Pi based Cheque and Cash Deposit machine with 
               digital Wallet"]
         },
       ]
    };