[Bug]: @storybook/nextjs next-image query parameters breaks images

[AGS1130]

Describe the bug

Our Next Image component is utilizing a loader prop, similar to the next configuration for images to optimize our images from our third-party CDN. Our images are breaking due to a duplicate query parameter that is added in next-image-default-loader.tsx. We've attempted to override the loader using the options object similar to what is show in the docs, overriding it directly in our next configuration, and conditionally check if we are running Storybook. However, none of these options have worked.

Is it possible to remove the query parameters and just return src for the defaultLoader?

Existing issue

Removing our component's query params

To Reproduce

https://www.chromatic.com/build?appId=6400f1d342966f9f686bc9e8&number=3451

System

Environment Info:

  System:
    OS: macOS 13.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.6

Additional context

This is after upgrading Storybook from v6.5.x to v7.4.0.

These are the updated addons, in addition to other libraries we are using in Storybook:

{
    "@chakra-ui/storybook-addon": "5.0.1",
    "@storybook/addon-a11y": "7.4.0",
    "@storybook/addon-actions": "7.4.0",
    "@storybook/addon-docs": "7.4.0",
    "@storybook/addon-essentials": "7.4.0",
    "@storybook/addon-interactions": "7.4.0",
    "@storybook/addon-links": "7.4.0",
    "@storybook/cli": "7.4.0",
    "@storybook/jest": "0.2.2",
    "@storybook/nextjs": "7.4.0",
    "@storybook/react": "7.4.0",
    "@storybook/testing-library": "0.2.0",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "storybook": "7.4.0",
    "storybook-addon-performance": "0.17.1",
    "storybook-react-intl": "2.0.3",
}

In addition, here is our main.ts file:

import { dirname, join, resolve } from "path";

module.exports = {
  stories: ["../stories/*.stories.mdx", "../components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],

  addons: [
    "@chakra-ui/storybook-addon",
    "storybook-addon-performance",
    "storybook-react-intl",
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions")
  ],

  framework: {
    name: getAbsolutePath("@storybook/nextjs"),
    options: {
      nextConfigPath: resolve(__dirname, "../../../apps/web/next.config.js")
    }
  },

  features: {
    emotionAlias: false
  },

  refs: {
    "@chakra-ui/react": {
      disable: true
    }
  },

  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
    }
  }
};

function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

[LouisCuvelierStadion]

I'm also having this kind of problem because wand qare readded to the URL ... So my URL looks like this https://url.com/image.jpg?w=2000&h=1000&f=webp?w=2048&q=75

Maybe URL should be modified this way :

  const url = new URL(src);
  url.searchParams.set('w', width);
  if (quality !== undefined) {
    url.searchParams.set('q', quality.toString());
  }
  return url.href;

Like this, values are overrided and not readded with ?w=value&q=value