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

qoefvg9y 于 2023-02-08 发布在其他

关注(0)|答案(1)|浏览(123)

我正在尝试在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

但是正确的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)
        });
});

next.js

来源：https://stackoverflow.com/questions/69974890/how-to-set-up-next-image-loader-url-correctly-for-external-url

1条答案

按热度按时间

iih3973s1#

好吧，所以我设法绕过它@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}
/>

就是这样。

赞(0）回复(0）举报 2023-02-08

我来回答

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

1条答案

相关问题

热门标签

最新问答