在第一次加载 nextjs 时无法加载所有内容/图像

Question

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;
          },
        })
      )
    )
  )
);

索引.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，然后显示所有>>>>图像，主要问题是在组件git>>>>>的背景图像上。

Answer 1

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

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.

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