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