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

Question

我正在导入 svg 图像，该图像的路径位于 json 文件中。 以下是 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； 目前这就是我得到的

任何帮助，将不胜感激。

Answer 1

如果您使用的是create-react-app ，您将希望将 static 资产（如图像）（如果您不是 ES6 将图像import代码中）放在public 文件夹中。 尝试将这些图像移动到由create-react-app的public文件夹中。 您可能还需要更新路径。 假设您的结构是：

public
  images
    photosnap.svg

您可能需要更改：

"logo": "./images/photosnap.svg",

至：

"logo": "/images/photosnap.svg",

希望这会有所帮助！