Javascript 图像未显示在页面上

我正在制作一个公文包网站，我试图让标志图片显示出来，但它们没有显示出来

最初，我在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;

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;

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;

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;

HomePage.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;

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;

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;

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;

从“React”导入React；
//组件导入语句
从“../components/JobsList.js”导入作业列表；
//内容导入语句
从“../content/JobsContent.js”导入主页内容；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state=主页内容；
}
render（）{
返回(
这就是我所做的
)
}
}
导出默认主页；

JobsList.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;

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;

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;

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;

从“React”导入React；
从“/Jobs”导入作业；
功能作业列表（道具）{
返回(
{props.jobs.map（j=>
)}
); 
} 
导出默认作业列表；

Jobs.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;

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;

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;

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;

从“React”导入React；
导入“../css/Experience.css”；
功能作业（道具）{
console.log（props.name）；
返回(
{props.companyName}
{props.title}
{props.startMonth}-{props.endMonth}
{props.location}
{props.desc}

);
}
导出默认作业；

…但是

徽标

属性的值不是图像。这是另一个对象。该对象有一个名为

Image1

的属性，该属性的值为图像

---

不要创建额外的对象；只需将图像指定给

徽标

属性：

logo: Image1,