[英]React isn't reading local images
I am trying to create an image slider for the projects in my portfolio.我正在尝试为我的投资组合中的项目创建图像 slider。 I created a seed file with the local paths to the images and alts for each image.
我创建了一个种子文件,其中包含图像的本地路径和每个图像的 alt。 As I am trying to map the photos across the projects page, I am able to see all of the alt values, and the first image, but the images succeeding that are not being read.
当我尝试 map 项目页面上的照片时,我能够看到所有的 alt 值和第一张图像,但后续的图像没有被读取。
Seed File:种子文件:
import Crescendo from "../assets/images/crescendo 2 (1).png";
import Donate from "../assets/images/donate homepage.png";
import Password from "../assets/images/password 2.png";
import SuperWiki from "../assets/images/super hero 2.jpg";
import Calculator from '../assets/images/react-calculator.png';
export const SliderData = [
{
image: Crescendo,
alt: "Crescendo, Full-stack project"
},
{
image: Donate,
alt: "Donate, a MERN stack project for displaying charities worth donating to"
},
{
image: Password,
alt: "A frontend designed and functional password generator"
},
{
image: SuperWiki,
alt: "Super Hero Wiki, designed with Marvel API to provide results for user's searches"
},
{
image: Calculator,
alt: "A calculator built using React and Javascript"
}
];
Component file:组件文件:
import React from 'react'
import {SliderData} from './SliderData';
function Projects() {
return (
<>
{SliderData.map((slide, index) =>{
return(
<img src={slide.image} alt={slide.alt}></img>
)
})}
</>
)
}
export default Projects
Thanks for your help in advance!提前感谢您的帮助!
I think you must replace "../" to be like "./" ( one dot )我认为您必须将“../”替换为“./”(一个点)
import image001 from "./assets/images/001.jpg";
import image002 from "./assets/images/002.png";
export const SliderData = [
{
image: image001,
alt: "Crescendo, Full-stack project"
},
{
image: image002,
alt: "Donate, a MERN stack project for displaying charities worth donating to"
},
];
import {SliderData} from './SliderData';
function App() {
return (
<>
{SliderData.map((slide, index) =>{
return(
<img src={slide.image} alt={slide.alt}></img>
)
})}
</>
);
}
export default App;
Result:结果:
I restarted the server and all of the images are suddenly appearing in the map.我重新启动服务器,所有图像突然出现在 map 中。 I guess it was just a glitch in the react server.
我猜这只是反应服务器中的一个小故障。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.