我正在为播客建立一个简单的网站。最初,我以客人为对象,然后将其作为道具传递到EpisodePage中。图像被导入到文件中并分配给变量。这很好。
从那以后,我将来宾数据提取到一个JSON文件中,该文件对图像不起作用。
我的问题是这个;如何将图像/图像的位置存储在JSON文件中,然后使其在组件和页面上呈现?
[您可以在下面看到我进行了两次尝试-第一个尝试是将文件路径包含在JSON中(不起作用-我在App.js或组件中呈现错误吗?)第二种是将变量名称(sophiePic或jasminePic)作为字符串包含在JSON中-也不起作用。
非常感谢您的协助!谢谢。
缩写代码:
App js:
import jasminePic from "./assets/jasmine.jpg";
import sophiePic from "./assets/SKC.jpg";
import guests from './data/guests.json'
class App extends Component {
state = {
guests: guests,
showModal: false,
currentGuest: null,
};
...CODE OMITTED FOR BREVITY...
render() {
let guestPage = null;
if (this.state.currentGuest != null) {
guestPage = (
<div>
<EpisodePage
epNum={this.state.currentGuest.epNum}
name={this.state.currentGuest.name}
pic={require(this.state.currentGuest.pic)}
text={this.state.currentGuest.text}
twitter={this.state.currentGuest.twitter}
instagram={this.state.currentGuest.instagram}
appleUrl={this.state.currentGuest.appleUrl}
spotifyUrl={this.state.currentGuest.spotifyUrl}
/>
</div>
// TODO do this automatically
);
}
return (
<>
<Home />
<About />
<Episodes guestSelector={this.guestSelector.bind(this)} />
<Rodal
width={99}
height={99}
measure={"%"}
visible={this.state.showModal}
onClose={this.hideModalHandler.bind(this)}
enterAnimation={'slideUp'}
leaveAnimation={'slideDown'}
>
<div>{guestPage}</div>{" "}
</Rodal>
</>
);
}
}
export default App;
访客json文件:
[
{
"epNum": "1",
"name": "Jasmine",
"pic": "./assets/jasmine.jpg",
"twitter": "@handle",
"instagram": "@handle",
"appleUrl":
"https://podcasts.apple.com/gb/podcast/episode-1",
"spotifyUrl": "https://open.spotify.com/episode/",
"text":
"lorem ipsum..."
},
{
"epNum": "2",
"name": "Sophie",
"pic": "sophiePic",
"twitter": null,
"instagram": "@sophie",
"appleUrl":
"https://podcasts.apple.com/gb/podcast/episode-1",
"spotifyUrl": "https://open.spotify.com/episode/",
"text":
"lorem ipsum...” "
}
]
EpisodePage组件:
import React from "react";
import { FaSpotify, FaPodcast, FaTwitter, FaInstagram } from "react-icons/fa";
const EpisodePage = (props) => {
const handleLinkClick = (url) => {
window.open(url, "_blank");
// this.nextComponent.scrollIntoView({ behavior: "smooth" });
};
return (
<>
<section className="epSection" id="epSection">
<div className="epTitle">
EPISODE {props.epNum} - {props.name}
</div>
<div className="epContainer">
{/* embed episode? */}
{/* <div className="epImage"> */}
<img className="epImage" src={props.pic} alt="guestPic" />
{/* do we need className & alt on above line? */}
{/* </div> */}
<div className="epText">{props.text}</div>
</div>
<div className="directories">
<FaPodcast className="directoryIcon" onClick={() => handleLinkClick(props.appleUrl)} />
{/* add hover over animation to all icons */}
<p>Apple Podcasts</p>
<FaSpotify className="directoryIcon" onClick={() => handleLinkClick(props.spotifyUrl)} />
<p>Spotify</p>
</div>
<div className="socials">
<FaTwitter className="directoryIcon" />
<p>{props.twitter}</p>
<FaInstagram className="directoryIcon" />
<p>{props.instagram}</p>
{/* need to show/not show socials if exist/dont */}
</div>
{/* add link back UP to episodes */}
</section>
</>
);
// }
};
export default EpisodePage;
[找到解决方案:不要使用JSON,请使用此处所述的标准js文件:https://www.freecodecamp.org/forum/t/best-way-to-pass-icon-img-urls-in-react-as-props/307917/2
在您的.json文件中,数组中每个对象文字的属性图标是一个字符串。因此,您要将图标字符串传递给DailyWorkout而不是图标“本身”(从png文件导入)。
代替从.json文件导入信息,您可以从导出数组的.js文件。您可以从此.js导入图片。
工作代码:
import jasminePic from "../assets/jasmine.jpg"
import sophiePic from "../assets/sophie.jpg";
export default [
{
/* other properties */,
pic: jasminePic,
},
{
/* other properties */,
pic: sophiePic,
},
]