反應<img src=“#”/>標簽在瀏覽器中不顯示圖像

Question

你好，這似乎是基本的，但我迷路了。

標簽在瀏覽器中顯示圖像的替代名稱，但不顯示圖像。

這是該部分的圖像和代碼。

標志是它的位置，但不顯示標志的圖像。

投資組合.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"]
         },
       ]
    };

教育卡.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

添加以下行以導入圖像

import Logo from <image path>

並將其用於圖像 src

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

Answer 2

通過以下方式導入圖像：

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

並在圖像標簽的來源中使用Logo 。

Answer 3

require在對象內部是聞所未聞的。 您可以嘗試以下幾點：

1. 需要/在頂部導入您的圖像。 在對象內部使用它。

投資組合.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"]
         },
       ]
    };

否則，您可以做的是使用eval ，例如：

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"]
         },
       ]
    };