無法在滑塊中顯示圖像

Question

我想用幾張圖片制作一個滑塊。 所以我正在使用反應。 首先，我創建了 Main 組件，將其作為子 Slider 組件放置。 在我用對象創建數組的 Slider 組件中，對象有一個指向圖片的路徑。 然后我創建 SliderContent 組件並將其導入 Slider 組件。 然后我創建了 Slide 組件並將其導入到 SliderContent 組件中。 這是主要組件代碼的外觀：

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



export default function Main(){

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

以下是組件 Slider 代碼的外觀：

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>
        </>
    )
}

但這是它顯示的內容：它在幻燈片組件中顯示了 img 標簽的 alt 屬性，並且圖片未打開

Answer 1

由於 Webpack 捆綁您的應用程序的方式，您必須 require() 您的本地圖像，以便它們顯示在 React 組件中。

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

另一種選擇是直接導入圖像：

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

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

<img src={MyImage} />