REACT SWIPER 不显示图像
REACT SWIPER DOESN'T SHOW IMAGES
你好为什么不显示图片?
我使用带有立方体效果的反应滑动器(关闭立方体效果并不能解决任何问题
这是我的代码
谢谢
是的,我对 React 和其他东西真的很陌生......我几乎找不到如何让 React 滑动器与 React 一起工作......
前 3 张幻灯片是空白的,第 4 和第 5 张幻灯片是 slide4 slide5
import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";
SwiperCore.use([EffectCube, Autoplay]);
const images = [{ image: require("./img/1.jpg") }, { image: require("./img/2.jpg") }, { image: require("./img/3.jpg") }];
class Swipe extends React.Component {
componentDidMount() {
this.swiper = new Swiper(".swiper-container", {
effect: "cube",
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: "swiper-button-next",
prevEl: "swiper-button-prev",
},
loop: true,
grabCursor: true,
autoplay: {
delay: 7000,
disableOnInteraction: true,
},
});
}
render() {
return (
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<image classname="swiper-image" src={images[0]} />
</div>
<div class="swiper-slide">
<image classname="swiper-image" src={images[1]} />
</div>
<div class="swiper-slide">
<image classname="swiper-image" src={images[2]} />
</div>
<div class="swiper-slide">SLIDE4</div>
<div class="swiper-slide">SLIDE5</div>
</div>
<div class="swiper-pagination"></div>
</div>
);
}
}
export default Swipe;
主要问题是您提供图像 src
道具的方式:
<image classname="swiper-image" src={images[0]}
这里实际上是将对象传递给 src
,因为 images
数组如下所示:
const images = [
{ image: require("./img/1.jpg") }, // Each of these objects are passed to the `src` prop of every image
{ image: require("./img/2.jpg") },
{ image: require("./img/3.jpg") }
];
相反,您需要像这样传递图像:
<img className="swiper-image" src={images[0].image} />
也不应该是 class
或 classname
,而是 className
而不是 React。它不是 image
标签,而是 img
.
您的示例的完整调整版本:
import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";
// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/effect-cube/effect-cube.scss";
SwiperCore.use([EffectCube, Autoplay]);
const images = [
{ image: require("./img/1.jpg") },
{ image: require("./img/2.jpg") },
{ image: require("./img/3.jpg") },
];
class Swipe extends React.Component {
componentDidMount() {
this.swiper = new Swiper(".swiper-container", {
effect: "cube",
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: "swiper-button-next",
prevEl: "swiper-button-prev",
},
loop: true,
grabCursor: true,
autoplay: {
delay: 7000,
disableOnInteraction: true,
},
});
}
render() {
return (
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img className="swiper-image" src={images[0].image} />
</div>
<div className="swiper-slide">
<img className="swiper-image" src={images[1].image} />
</div>
<div className="swiper-slide">
<img className="swiper-image" src={images[2].image} />
</div>
<div className="swiper-slide">SLIDE4</div>
<div className="swiper-slide">SLIDE5</div>
</div>
<div className="swiper-pagination"></div>
</div>
);
}
}
export default Swipe;
我还想指出,您可以使用 swiperjs
的 React 特定实现,请参阅文档 here。
所以我用谷歌搜索了它并计算了修复(我希望它是)
将其添加到 webpack.config.js
{
test: /\.(jpeg|jpg|png)$/,
use: {
loader: 'file-loader',
options: {
esModule: false
}
}
},
你好为什么不显示图片? 我使用带有立方体效果的反应滑动器(关闭立方体效果并不能解决任何问题 这是我的代码 谢谢
是的,我对 React 和其他东西真的很陌生......我几乎找不到如何让 React 滑动器与 React 一起工作......
前 3 张幻灯片是空白的,第 4 和第 5 张幻灯片是 slide4 slide5
import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";
SwiperCore.use([EffectCube, Autoplay]);
const images = [{ image: require("./img/1.jpg") }, { image: require("./img/2.jpg") }, { image: require("./img/3.jpg") }];
class Swipe extends React.Component {
componentDidMount() {
this.swiper = new Swiper(".swiper-container", {
effect: "cube",
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: "swiper-button-next",
prevEl: "swiper-button-prev",
},
loop: true,
grabCursor: true,
autoplay: {
delay: 7000,
disableOnInteraction: true,
},
});
}
render() {
return (
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<image classname="swiper-image" src={images[0]} />
</div>
<div class="swiper-slide">
<image classname="swiper-image" src={images[1]} />
</div>
<div class="swiper-slide">
<image classname="swiper-image" src={images[2]} />
</div>
<div class="swiper-slide">SLIDE4</div>
<div class="swiper-slide">SLIDE5</div>
</div>
<div class="swiper-pagination"></div>
</div>
);
}
}
export default Swipe;
主要问题是您提供图像 src
道具的方式:
<image classname="swiper-image" src={images[0]}
这里实际上是将对象传递给 src
,因为 images
数组如下所示:
const images = [
{ image: require("./img/1.jpg") }, // Each of these objects are passed to the `src` prop of every image
{ image: require("./img/2.jpg") },
{ image: require("./img/3.jpg") }
];
相反,您需要像这样传递图像:
<img className="swiper-image" src={images[0].image} />
也不应该是 class
或 classname
,而是 className
而不是 React。它不是 image
标签,而是 img
.
您的示例的完整调整版本:
import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";
// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/effect-cube/effect-cube.scss";
SwiperCore.use([EffectCube, Autoplay]);
const images = [
{ image: require("./img/1.jpg") },
{ image: require("./img/2.jpg") },
{ image: require("./img/3.jpg") },
];
class Swipe extends React.Component {
componentDidMount() {
this.swiper = new Swiper(".swiper-container", {
effect: "cube",
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: "swiper-button-next",
prevEl: "swiper-button-prev",
},
loop: true,
grabCursor: true,
autoplay: {
delay: 7000,
disableOnInteraction: true,
},
});
}
render() {
return (
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img className="swiper-image" src={images[0].image} />
</div>
<div className="swiper-slide">
<img className="swiper-image" src={images[1].image} />
</div>
<div className="swiper-slide">
<img className="swiper-image" src={images[2].image} />
</div>
<div className="swiper-slide">SLIDE4</div>
<div className="swiper-slide">SLIDE5</div>
</div>
<div className="swiper-pagination"></div>
</div>
);
}
}
export default Swipe;
我还想指出,您可以使用 swiperjs
的 React 特定实现,请参阅文档 here。
所以我用谷歌搜索了它并计算了修复(我希望它是)
将其添加到 webpack.config.js
{
test: /\.(jpeg|jpg|png)$/,
use: {
loader: 'file-loader',
options: {
esModule: false
}
}
},