从React App中的json文件导入时损坏的徽标图像

我正在导入路径在json文件中的svg图像。以下是json文件的一部分：

[
{
  "id": 1,
  "company": "Photosnap",
  "logo": "./images/photosnap.svg",
  "new": true,
  "featured": true,
  "position": "Senior Frontend Developer",
  "role": "Frontend",
  "level": "Senior",
  "postedAt": "1d ago",
  "contract": "Full Time",
  "location": "USA Only",
  "languages": ["HTML", "CSS", "JavaScript"]
},
{

我创建了两个组件。当应用显示工作列表时。因此，我有一个工作清单组件和一个工作卡组件。作业列表组件的代码如下：

import React from 'react';

import './job-listing.styles.css';
import JobCard from '../job-card/job-card.component.jsx/job-card.component';
import { Component } from 'react';


class JobListing extends Component {
constructor() {
    super();
    this.state = {
        jobs: []
    }
   };

   componentDidMount() {
    fetch('/data.json')
    .then(response => response.json())
    .then(data => this.setState({jobs: data}))

}
render() {
    return (
        <div>
            {this.state.jobs.map(({id, ...otherJobProps}) =>(
            <JobCard key={id} {...otherJobProps} />
            ))}
        </div>

       )
     }
   }

  export default JobListing;

作业卡组件如下：

import React from 'react';

import './job-card.styles.css';

const JobCard = ({company, position, postedAt, contract, location, logo }) => (
<div className='card'>
<img src={logo} alt="logo" width="42" height="42"></img>
<h2>{company}</h2>
<h1>{position}</h1>
<div className='details'>
    <h3>{postedAt} &#183;</h3>
    <h3>{contract} &#183;</h3>
    <h3>{location}</h3>
 </div>
</div>
)

导出默认JobCard；目前，这就是我得到的

任何帮助，将不胜感激。