Question

我在静态网站项目中使用了材质滑块。滑块在初始化时工作良好（位于主页上），但从其他页面重定向时仅显示灰色块。手动刷新主页后，该问题将得到解决。

我希望滑块在初始化和重定向情况下都应自动加载图像。

请给我一些想法来解决此问题。谢谢！

Slider.js

import React from 'react';
import board from './images/board.jpeg';
import senior from './images/senior.jpg';
import youth from './images/youth.jpeg';

const Slider =(props) => {
    return (
        <div className="slider">
             <ul className="slides">
                <li>
                    <img className="responsive-img" src={board} alt=""/>
                        <div className="caption">
                            <h3 className='teal-text'>PCCSH board</h3>
                        </div>
                </li>
                <li>
                    <img className="responsive-img" src={senior} alt=""/>
                        <div className="caption">
                            <h3>Senior</h3>
                        </div>
                </li>
                <li>
                    <img className="responsive-img" src={youth} alt=""/>
                        <div className="caption">
                            <h3>Youth</h3>
                        </div>
                </li>
            </ul>
        </div>

    )
}

export default Slider;

Home.js

import React from 'react';
import Slider from './Slider'
import funded from './images/funded.jpg';
import partner from './images/partner.jpg';

const Home = (props) => {
    return (
        <div className="container">
            <Slider />
            <h2 className="title center">Welcome to PCCSH website!</h2>
            <div>
                <img className="funded responsive-img center-block" src={funded} alt=""/>
            </div>
            <div>
                <img className="partner responsive-img center-block" src={partner} alt=""/>
            </div>
        </div>
    )
}

export default Home;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
    <div id="root"></div>
    <base href="/" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script src="/bundle.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slider();
        });
    </script>
</body>
</html>

重新设置后无法加载材质滑块图像

0 个答案: