图片未显示在页面

Question

我正在制作一个投资组合网站，并且试图使徽标图像显示出来，但它们没有显示出来。

最初，我在HomePage.js中的this.state中包含了内容，但是我决定将其放在另一个文件中显得更加整洁。图像显示在HomePage.js中。

相关代码

HomePageContent.js

// Image import statements
import Image1 from '../img/Image1.jpg';
import Image2 from '../img/Image2.jpg';

let HomePageContent = {
  jobs: [{
    logo: {Image1},
    companyName: 'Company1' ,
    title: 'Job1',
    startMonth: 'November 2019',
    endMonth: 'Present',
    location: 'Location1',
    desc: 'Placeholder',
    id: 1
  }, {
    logo: {Image2},
    companyName: 'Company2',
    title: 'Job2',
    startMonth: 'June 2018',
    endMonth: 'May 2019',
    location: 'Location2',
    desc: 'Placeholder',
    id: 2
  }]};

export default HomePageContent;

HomePage.js

import React from 'react';

// Component import statements
import JobsList from '../components/JobsList.js';

// Content import Statements
import HomePageContent from '../content/JobsContent.js';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = HomePageContent;
  }

  render() {
    return(
      <div>
        <h4>Here's what I've done</h4>
        <JobsList jobs={this.state.jobs}/>
      </div>
    )
  }
}

export default Home;

JobsList.js

import React from "react";
import Jobs from "./Jobs";

function JobsList(props) {
  return (
    <div className="JobsList">
      {props.jobs.map(j =>
        <Jobs logo={j.logo}
          companyName={j.companyName}
          title={j.title}
          startMonth={j.startMonth}
          endMonth={j.endMonth}
          location={j.location}
          desc={j.desc}key={j.id}/>
      )}
     </div> 
  ); 
} 

export default JobsList;

Jobs.js

import React from 'react';

import '../css/Experience.css';

function Jobs(props) {
  console.log(props.name);
    return (
      <div className='exp-container'>
        <img src={props.logo} alt='Logo' />
        <div className='content'>
          <div>{props.companyName}</div>
          <div>{props.title}</div>
          <div>{props.startMonth} - {props.endMonth}</div>
          <div>{props.location}</div>
          <div><p>{props.desc}</p></div>
        </div>
      </div>
    );
}

export default Jobs;

Answer 1

<img src={props.logo} alt='Logo' />

您正在尝试从logo属性读取图像。 （旁边：Your alt text isn't useful）。

logo: {Image1},

…，但是logo属性的值不是图像。这是另一个对象。该对象具有名为Image1的属性，该属性的值是图像。

---

不要创建额外的对象；只需将图像分配给logo属性：

logo: Image1,