时间戳

首页 > 解决方案 > 无法在滑块中显示图像

javascript - 无法在滑块中显示图像

问题描述

我想用几张照片制作一个滑块。所以我正在使用反应。首先，我创建 Main 组件，我将其作为子 Slider 组件放置。在我用对象创建数组的 Slider 组件中，对象具有图片的路径。然后我创建 SliderContent 组件并将其导入到 Slider 组件中。然后我创建了 Slide 组件并将其导入到 SliderContent 组件中。这是主要组件代码的外观：

import Slider from "../Components/Slider";



export default function Main(){

    return(
        <>
            <div className="main">
                <Slider />
            </div>
        </>
    )
}

这是组件滑块代码的外观：

import './Slider.css'
import SliderContent from "./SliderContent";
// import Slide from "./Slide";

const images = [
    {
        id: 2,
        title: "imageTwo",
        img: "../images/pharma.jpg"
    }
]

export default function Slider(){



    return(
        <>
            <div className="slider">
                <SliderContent slides ={images} />
            </div>
        </>
    )
}

这是组件 SliderContent 代码的外观：

import './Slider.css'
import Slide from "./Slide";


export default function SliderContent(props){
    return(
        <>
            <div className="sliderContent">
                {
                    props.slides.map(slide =>
                        <Slide key={slide.img} content={slide.img} />
                    )
                }
            </div>
        </>
    )
}

这是 Slide 组件代码的外观：

import './Slider.css'

export default function Slide(props){
    return(
        <>
            <div className="slide" >
                <img alt="pic" src={props.content}/>
            </div>
        </>
    )
}

但这是它显示的内容： 它在 Slide 组件中显示 img 标签的 alt 属性，并且图片无法打开

标签： javascriptreactjsreact-props

解决方案

由于 Webpack 捆绑您的应用程序的方式，您必须 require() 本地图像才能显示在 React 组件中。

<img src={require('../images/pharma.jpg')} />

另一种选择是直接导入图像：

import MyImage from '../images/pharma.jpg';

然后在需要的地方使用它：

<img src={MyImage} />

推荐阅读