Use rx.el.img as rx.image (#2558)

* Use rx.el.img as rx.image

* Update test_image to work with plain rx.el.img

reflex/components/__init__.py

@@ -7,10 +7,11 @@ from .component import Component
 from .component import NoSSRComponent as NoSSRComponent
 from .core import *
 from .datadisplay import *
+from .el import img as image
 from .gridjs import *
 from .markdown import *
 from .moment import *
-from .next import NextLink, image, next_link
+from .next import NextLink, next_link
 from .plotly import *
 from .radix import *
 from .react_player import *

reflex/components/el/elements/media.py

@@ -95,9 +95,6 @@ class Img(BaseHTML):
     # How the image should be decoded
     decoding: Var[Union[str, int, bool]]
 
-    # The intrinsic height of the image
-    height: Var[Union[str, int, bool]]
-
     # Specifies an intrinsic size for the image
     intrinsicsize: Var[Union[str, int, bool]]
 
@@ -122,9 +119,6 @@ class Img(BaseHTML):
     # The name of the map to use with the image
     use_map: Var[Union[str, int, bool]]
 
-    # The intrinsic width of the image
-    width: Var[Union[str, int, bool]]
-
 
 class Map(BaseHTML):
     """Display the map element."""

reflex/components/el/elements/media.pyi

@@ -376,9 +376,6 @@ class Img(BaseHTML):
         decoding: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         intrinsicsize: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -401,9 +398,6 @@ class Img(BaseHTML):
         use_map: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -510,7 +504,6 @@ class Img(BaseHTML):
             border: Border width around the image
             cross_origin: Configures the CORS requests for the image
             decoding: How the image should be decoded
-            height: The intrinsic height of the image
             intrinsicsize: Specifies an intrinsic size for the image
             ismap: Whether the image is a server-side image map
             loading: Specifies the loading behavior of the image
@@ -519,7 +512,6 @@ class Img(BaseHTML):
             src: URL of the image to display
             src_set: A set of source sizes and URLs for responsive images
             use_map: The name of the map to use with the image
-            width: The intrinsic width of the image
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

tests/components/media/test_image.py

@@ -35,7 +35,10 @@ def test_serialize_image(pil_image: Img):
 def test_set_src_str():
     """Test that setting the src works."""
     image = rx.image(src="pic2.jpeg")
-    assert str(image.src) == "{`pic2.jpeg`}"  # type: ignore
+    # when using next/image, we explicitly create a _var_is_str Var
+    # assert str(image.src) == "{`pic2.jpeg`}"  # type: ignore
+    # For plain rx.el.img, an explicit var is not created, so the quoting happens later
+    assert str(image.src) == "pic2.jpeg"  # type: ignore
 
 
 def test_set_src_img(pil_image: Img):