update diagnostic

crates/biome_js_analyze/src/lint/nursery/no_img_element.rs

@@ -15,6 +15,10 @@ declare_lint_rule! {
     /// component from `next/image`. Next.js's `<Image />` automatically optimizes images
     /// by serving responsive sizes and using modern formats, improving performance and reducing bandwidth.
     ///
+    /// If your project is self-hosted, ensure that you have sufficient storage and have
+    /// installed the `sharp` package to support optimized images. When deploying to managed
+    /// hosting providers, be aware of potential additional costs or usage.
+    ///
     /// ## Examples
     ///
     /// ### Invalid
@@ -98,11 +102,12 @@ impl Rule for NoImgElement {
                 rule_category!(),
                 ctx.query().range(),
                 markup! {
-                    "Using "<Emphasis>"<img>"</Emphasis>" could result in slower LCP and higher bandwidth."
+                    "Don't use "<Emphasis>"<img>"</Emphasis>" element."
                 },
             )
-            .note(markup! { "Consider using "<Emphasis>"<Image />"</Emphasis>" from "<Emphasis>"next/image"</Emphasis>" to automatically optimize images." })
-            .note(markup! { "This may incur additional usage or cost from your provider." })
+            .note(markup! {
+                "Using the "<Emphasis>"<img>"</Emphasis>" can lead to slower LCP and higher bandwidth. Consider using "<Emphasis>"<Image />"</Emphasis>" from "<Emphasis>"next/image"</Emphasis>" to automatically optimize images."
+            })
         );
     }
 }

crates/biome_js_analyze/tests/specs/nursery/noImgElement/invalid.jsx.snap

@@ -19,35 +19,31 @@ expression: invalid.jsx
 ```
 invalid.jsx:2:2 lint/nursery/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  ! Using <img> could result in slower LCP and higher bandwidth.
+  ! Don't use <img> element.
   
     1 │ <>
   > 2 │ 	<img alt="Foo" />
       │ 	^^^^^^^^^^^^^^^^^
     3 │ 
     4 │ 	<div>
   
-  i Consider using <Image /> from next/image to automatically optimize images.
-  
-  i This may incur additional usage or cost from your provider.
+  i Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
   
 
 ```
 
 ```
 invalid.jsx:5:3 lint/nursery/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  ! Using <img> could result in slower LCP and higher bandwidth.
+  ! Don't use <img> element.
   
     4 │ 	<div>
   > 5 │ 		<img alt="Foo" />
       │ 		^^^^^^^^^^^^^^^^^
     6 │ 	</div>
     7 │ </>
   
-  i Consider using <Image /> from next/image to automatically optimize images.
-  
-  i This may incur additional usage or cost from your provider.
+  i Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
   
 
 ```