javascript - 使用 nextjs 放大时，React Image Magnifiers 不起作用

Question

我想在悬停时放大图像并使用此插件 react-image-magnifiers 通常当我没有 next.js 时很好但是当我使用 next.js 只显示图像，当我尝试将鼠标悬停在图像上，然后放大不起作用时，可能是我的 next.config.js 有任何错误？

这是我的 next.config.js

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

const nextSettings = {
    exportTrailingSlash: true,
    exportPathMap: function() {
        return {
            '/': { page: '/' },
        };
    },
};

module.exports = withPlugins([[withSass(withCss({
    webpack: function (config) {
        config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]'
                }
            }
        })
        return config
    }
})), withImages()]]);

这是我的 Gallery.jsx

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import { SideBySideMagnifier } from "react-image-magnifiers";

export default function GallerySide (props) {
    const dataImage = props.product;

    const [state, setState] = React.useState({
        alwaysInPlace: false,
        overlayOpacity: 0.6,
        switchSides: false,
        fillAvailableSpace: false,
        fillAlignTop: false,
        fillGapLeft: 0,
        fillGapRight: 10,
        fillGapTop: 10,
        fillGapBottom: 10,
        largeImage: dataImage[0].largeImage,
    });

    const {
        alwaysInPlace,
        overlayOpacity,
        switchSides,
        fillAvailableSpace,
        fillAlignTop,
        fillGapLeft,
        fillGapRight,
        fillGapTop,
        fillGapBottom,
        largeImage
    } = state;

    const ArrowLeft = (props) => (
        <a href="#disabled" {...props} className="grist-prev">
            <i className="fas fa-chevron-left"></i>
        </a>
    );

    const ArrowRight = (props) => (
        <a href="#disabled" {...props} className="grist-next">
            <i className="fas fa-chevron-right"></i>
        </a>
    );

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        prevArrow: <ArrowLeft />,
        nextArrow: <ArrowRight />,
    };

    const ChangeSlider = (event) => {
        setState({ 
            alwaysInPlace: false,
            overlayOpacity: 0.6,
            switchSides: false,
            fillAvailableSpace: false,
            fillAlignTop: false,
            fillGapLeft: 0,
            fillGapRight: 10,
            fillGapTop: 10,
            fillGapBottom: 10,
            largeImage: event,
        });
    }

    return (
        <>
            <SideBySideMagnifier
                className="grist-input-position"
                style={{ order: switchSides ? "1" : "0" }}
                imageSrc={largeImage}
                largeImageSrc={largeImage}
                alwaysInPlace={alwaysInPlace}
                overlayOpacity={overlayOpacity}
                switchSides={switchSides}
                zoomPosition="left"
                inPlaceMinBreakpoint={641}
                fillAvailableSpace={fillAvailableSpace}
                fillAlignTop={fillAlignTop}
                fillGapTop={fillGapTop}
                fillGapRight={fillGapRight}
                fillGapBottom={fillGapBottom}
                fillGapLeft={fillGapLeft}
                zoomContainerBorder="1px solid #ccc"
                cursorStyle="zoom-in"
            />
            
            <div className="col-12 mt-2">
                <div className="col-11 mx-auto">
                    <Slider {...settings}>
                        {dataImage.map((data, index) => 
                            <a href="#disabled" key={index} onClick={() => ChangeSlider(data.largeImage)}>
                                <div className="card m-2">
                                    <div className="card-body p-0">
                                        <img src={data.thumbImage} width="100%" alt="Grist" />
                                    </div>
                                </div>
                            </a>
                        )}
                    </Slider>
                </div>
            </div>
        </>
    );
}

我希望有这样的解决方案或其他方法。

更新:

我解决了这个问题，因为我有 scss 调用“typhography.scss”并使标签“img”最大宽度:100%，因为我的图像总是设置 100% 的宽度，通过禁用或删除此行

img {
     max-width: 100%;
}

它工作得很好，谢谢。

Answer 1

我解决了这个问题，因为我有 scss 调用“typhography.scss”并使标签“img”最大宽度:100%，因为我的图像总是设置 100% 的宽度，通过禁用或删除此行

img {
     max-width: 100%;
}

它工作得很好。