首次加载nextjs时无法加载所有内容/图像

问题描述

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,callback);
                  } else {
                    callback();
                  }
                },...(typeof origExternals[0] === "function"
                  ? []
                  : origExternals),];
              config.module.rules.unshift({
                test: antStyles,use: "null-loader",});
            }
            return config;
          },})
      )
    )
  )
);

index.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>

问题

当我运行开发构建时，它完美地显示了所有图像，但是当我开始>>生产构建时，它在第一次加载时不显示所有图像，一些>>>图像未加载，当我进行硬刷新时通过 crtl +f5，然后它显示所有 >>>>images ，主要问题是在组件 git >>>>above 的背景图像上。

解决方法

我遇到了同样的问题并通过实施以下方式解决了，

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>`
          }}
        />
      );
     }

2. 用下面的组件替换你的标签

   <ImageSSR
          src={imgSrc}
          fallbackSrc={fallBackImageSrc}
          alt="product image"
        />
   Note: imgSrc and fallBackImageSrc are image src links.
   

不确定它是否会解决您的问题。你可以试试。