Relax warning for next/image loader width even more (#30624)

Author: styfle

packages/next/client/image.tsx

@@ -451,13 +451,16 @@ export default function Image({
     }
 
     if (!unoptimized) {
-      const rand = Math.floor(Math.random() * 1000) + 100
-      const url = loader({ src, width: rand, quality: 75 })
-      if (
-        !url.includes(rand.toString()) &&
-        !url.includes('w=') &&
-        !url.includes('width=')
-      ) {
+      const urlStr = loader({
+        src,
+        width: widthInt || 400,
+        quality: qualityInt || 75,
+      })
+      let url: URL | undefined
+      try {
+        url = new URL(urlStr)
+      } catch (err) {}
+      if (urlStr === src || (url && url.pathname === src && !url.search)) {
         console.warn(
           `Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` +
             `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`

test/integration/image-component/default/pages/invalid-loader.js

@@ -20,18 +20,27 @@ const Page = () => {
         loader={({ src, width }) => `${src}/${width}/file.jpg`}
       />
       <Image
-        id="width-querystring"
+        id="width-querystring-w"
         src="/test.webp"
         width={100}
         height={100}
         loader={({ src, width }) => `${src}?w=${width / 2}`}
       />
       <Image
-        id="width-querystring-full"
+        id="width-querystring-width"
         src="/test.gif"
         width={100}
         height={100}
-        loader={({ src, width }) => `${src}?width=${width * 2}`}
+        loader={({ src, width }) =>
+          `https://example.com${src}?width=${width * 2}`
+        }
+      />
+      <Image
+        id="width-querystring-size"
+        src="/test.tiff"
+        width={100}
+        height={100}
+        loader={({ src }) => `https://example.com${src}?size=medium`}
       />
       <footer>footer</footer>
     </div>

test/integration/image-component/default/test/index.test.js

@@ -722,6 +722,9 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /Image with src (.*)gif(.*) has a "loader" property that does not implement width/gm
       )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)tiff(.*) has a "loader" property that does not implement width/gm
+      )
     })
   } else {
     //server-only tests