如何为外部 url 正确设置 Next image loader url答案

【问题标题】：How to set up Next image loader url correctly for external url如何为外部 url 正确设置 Next image loader url
【发布时间】：2021-12-26 16:32:27
【问题描述】：

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

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

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

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

但正确的网址是

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 sn-p

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

【问题讨论】：

将完整的 url 放入 src - stackoverflow.com/a/66148998/15304814。阅读该主题可能还有其他一些内容。
@sean 谢谢，到目前为止，我已经在线阅读了大量文档，但所提供的解决方案都没有解决我的问题。渲染这些图像真是一场噩梦。我知道问题出在哪条路径上，但我所做的却没有得到预期的 url。欢迎任何帮助谢谢

标签： next.js server-side-rendering firebase-hosting

【解决方案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}
            />

而且它:)。

感谢大家的帮助。我希望这将在未来有人。 :)

【讨论】：