如何为外部 url 正确设置下一个图像加载器 url

Question

我正在尝试在 firebase 上托管我的第一个应用程序，但我在 next.config 文件上遇到了图像加载器的一些问题。初始配置如下

module.exports = {
images: {
domains: ['assets.coingecko.com'],
loader: 'imgix',
path: 'https://assets.coingecko.com/coins/images/',
},

当我检查已部署页面上的 url 时，link 直接指向

https://assets.coingecko.com/https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579=&auto=format&fit=max&w=64

但正确的 url 是

https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579=&auto=format&fit=max&w=64.

我已尝试将我的配置文件修改为以下内容

module.exports = {
images: {
domains: ['assets.coingecko.com'],
loader: 'imgix',
path: '/',
},

或

module.exports = {
images: {
domains: ['assets.coingecko.com'],
loader: 'imgix',
path: '',
},

但是当我这样做并再次部署页面时，我收到错误 500 白页。有人可以帮助菜鸟吗？我不知道该怎么办。

完整 next.config.js 片段

const webpack = require('webpack');
const path = require('path');
//const withPlugins = require('next-compose-plugins');
//const optimizedImages = require('next-optimized-images');
//const withImages = require('next-images')


module.exports =  {
  images: {
    domains: ['assets.coingecko.com'],
      // loader: 'imgix',
      // path: '',
  },
  reactStrictMode: true,
  entry: './src/index.js',
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },

  //...
}

server.js

const { https } = require('firebase-functions');
const { default: next } = require('next');

const isDev = process.env.NODE_ENV !== 'production';

const server = next({
    dev: isDev,
    //location of .next generated after running -> yarn build
    conf: { distDir: '.next' },
    //images :{ domain :['assets.coingecko.com'],}
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
    return server.prepare()
        .then(() => {
            return nextjsHandle(req, res)
        });
});

Answer 1

好吧，我设法绕过了它@rawwater @SeanW。基本上在我的案例中需要做的是从下一个配置页面中删除加载程序和路径，如下所示：

const webpack = require('webpack');
const path = require('path');
//const withPlugins = require('next-compose-plugins');
//const optimizedImages = require('next-optimized-images');
const withImages = require('next-images')


module.exports = withImages(  {
  
  images: {
    domains: ['assets.coingecko.com', 'mywebsite.whatever.com'],
      //  loader: 'imgix',
      //  path: 'https://assets.coingecko.com/',
  },
  reactStrictMode: true,
  entry: './src/index.js',
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },

  //...
}
)

在 server.js 上取消注释图像如下

const { https } = require('firebase-functions');
const { default: next } = require('next');

const isDev = process.env.NODE_ENV !== 'production';

const server = next({
    dev: isDev,
    //location of .next generated after running -> yarn build
    conf: { distDir: '.next' },
    //images :{ domain :['assets.coingecko.com'],}
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
    return server.prepare()
        .then(() => {
            return nextjsHandle(req, res)
        });
});

然后将自定义加载器添加到我的图像中，如下所示在应该渲染它们的组件上


const myLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`
}

<Image
              loader={myLoader}
              className="mr-3"
              src={image}
              alt="crypto"
              height={30}
              width={30}
            />

而且它 :)。

谢谢大家的帮助。我希望将来会有人这样做。 :)

如何为外部 url 正确设置下一个图像加载器 url

How to set up Next image loader url correctly for external url

firebase-hosting

server-side-rendering

next.js