[英]broken logo image when importing from json file in React App
I am in the process of importing an svg image which path is in a json file.我正在导入 svg 图像,该图像的路径位于 json 文件中。 Below is part of the json file:以下是 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"]
},
{
I have created two components.我创建了两个组件。 As the app is showing a list of jobs.当应用程序显示工作列表时。 So the I have a job list component and a job card component.所以我有一个工作列表组件和一个工作卡组件。 The code for the job listing component is as follows:职位列表组件的代码如下:
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;
and for the Job Card component is below:工作卡组件如下:
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} ·</h3>
<h3>{contract} ·</h3>
<h3>{location}</h3>
</div>
</div>
)
export default JobCard;导出默认 JobCard; At the moment this is what I get目前这就是我得到的
Any help would be appreciated.任何帮助,将不胜感激。
If you are using create-react-app
you will want to put static assets such as images (if you are not not ES6 import
ing images into the code) in the public folder .如果您使用的是create-react-app
,您将希望将 static 资产(如图像)(如果您不是 ES6 将图像import
代码中)放在public 文件夹中。 Try moving these images into the public
folder created by create-react-app
.尝试将这些图像移动到由create-react-app
的public
文件夹中。 You may also need to update the paths.您可能还需要更新路径。 Assuming your structure is:假设您的结构是:
public
images
photosnap.svg
You may need to change:您可能需要更改:
"logo": "./images/photosnap.svg",
to:至:
"logo": "/images/photosnap.svg",
Hopefully that helps!希望这会有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.