[英]Can not load all content/images at first load nextjs
next.config.json next.config.json
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("nextjs-fonts");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./styles/theme.less"), "utf8")
);
module.exports = withFonts(
withLess(
withCSS(
withSass(
withImages({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
// const antStyles = /antd\/.*?\/style.*?\/.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function"
? []
: origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader",
});
}
return config;
},
})
)
)
)
);
index.tsx索引.tsx
<SwiperSlide key={i}>
<Col>
<Card
className="storeCard"
style={{
backgroundImage: `url(${card.imgUrl})`,
}}
>
<Title className="cardTitle" level={3}>
{card.title}
</Title>
<CustomBtn
link={card.button.link}
text={card.button.text}
info={false}
// style={{ justifyContent: "end" }}
icon={<RightInfoIcon />}
/>
</Card>
</Col>
</SwiperSlide>
Problem问题
when i run the dev build,it shows all images perfectly but when i start >>production build, it does not show all images at first load, some of the >>>images are not loaded, when i do hard refresh by crtl +f5,then it shows all >>>>images, the major issue is on the background image of the component git >>>>>above.
当我运行开发构建时,它完美地显示了所有图像但是当我开始>>生产构建时,它在第一次加载时不显示所有图像,一些>>>图像没有加载,当我通过 crtl + 进行硬刷新时f5,然后显示所有>>>>图像,主要问题是在组件git>>>>>的背景图像上。
I have faced the same issue and fixed by implementing the following way,我遇到了同样的问题并通过实施以下方式解决了,
1)Create a function(component) as below in the same.jsx or.js file. 1)在相同的.jsx或.js文件中创建如下函数(组件)。
function ImageSSR(props) {
let styleProps = "width:100%;background-color:#ccc;max-height:
170px;height: 170px;”;
return (
<div
dangerouslySetInnerHTML={{__html: `<div
style="margin:0.5rem;background-color:#000;display:inline-grid">
<img alt="${props.alt}" src="${props.src}" data-
fallback=${props.fallbackSrc}
onerror="this.onerror=null;this.src=this.dataset.fallback;"
style="${styleProps}"
/>
</div>`
}}
/>
);
}
Replace your tag with the below component用以下组件替换您的标签
<ImageSSR src={imgSrc} fallbackSrc={fallBackImageSrc} alt="product image" /> Note: imgSrc and fallBackImageSrc are image src links.
Don't know for sure that it would solve your problem.不确定它是否会解决您的问题。 You can give it try.
你可以试一试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.