Question

图像未显示。如果显示了占位符CDN图像，但此图像未在滑块中显示。因此，如何从本地图像文件夹导入图像。找不到图像路径。

import React, { Component } from 'react';
import './hotels.css';
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import star from '../../../assets/images/star.png';
import loc from '../../../assets/images/loc.png';

export default class Hotels extends Component {

    render() {
        const images = [
            {
                original: '/src/assets/images/hotel1.png',
                thumbnail: '/src/assets/images/hotel1.png',
            },
            {
                original: '/src/assets/images/hotel1.png',
                thumbnail: '/src/assets/images/hotel1.png'
            },
            {
                original: '/src/assets/images/hotel1.png',
                thumbnail: '/src/assets/images/hotel1.png'
            }
        ]
        return (
            <div className="Hotels">
                <main className="main-wrap bg-white">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-md-7">
                            <ImageGallery items={images} thumbnailPosition='bottom' showGalleryPlayButton={false} showPlayButton={false} showFullscreenButton={false} showGalleryFullscreenButton={false} />

                            </div>

                        </div>
                    </div>

                </main>
            </div>

        );
    }
}

Answer 1

盲目的答案：像这样更改images数组：

const images = [
  {
    original: require("./assets/images/hotel1.png"),
    thumbnail: require("./assets/images/hotel1.png")
  },
  {
    original: require("./assets/images/hotel1.png"),
    thumbnail: require("./assets/images/hotel1.png")
  },
  {
    original: require("./assets/images/hotel1.png"),
    thumbnail: require("./assets/images/hotel1.png")
  }
];

您应该require张图片，它使用相对路径字符串。另外，不能使用/src/..，而应使用相对路径。

作为旁注，请尝试在渲染器之外定义图像。在这种情况下，它们将在每个渲染器中重新定义。

找不到图像路径位置？

1 个答案: