[英]broken logo image when importing from json file in React App
我正在導入 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} ·</h3>
<h3>{contract} ·</h3>
<h3>{location}</h3>
</div>
</div>
)
任何幫助,將不勝感激。
如果您使用的是create-react-app
,您將希望將 static 資產(如圖像)(如果您不是 ES6 將圖像import
代碼中)放在public 文件夾中。 嘗試將這些圖像移動到由create-react-app
的public
文件夾中。 您可能還需要更新路徑。 假設您的結構是:
public
images
photosnap.svg
您可能需要更改:
"logo": "./images/photosnap.svg",
至:
"logo": "/images/photosnap.svg",
希望這會有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.