Overview of the Phoenix and LiveView Image Component

The Mishka Chelekom Image Component is a Phoenix LiveView component that is essentially an HTML img tag that allows you to display images with various attributes for customization. It supports properties like src for the image source, alt for descriptive text, and width and height for sizing. You can also use srcset for responsive images and loading for lazy loading.

This Phoenix LiveView component makes it easy to add styles to your images in Phoenix applications using Tailwind CSS. By allowing props for attributes like border radius and shadow, developers can quickly customize the appearance of images without writing extensive CSS. With Tailwind's utility classes, you can achieve the desired look for your images with just a few simple props, making it straightforward to create a polished and visually appealing user interface.

Default img attribues

• src: This required attribute specifies the media link for the image, which is the source URL from which the image will be loaded.
• alt: This optional attribute provides a description of the image, important for accessibility. It serves as alternative text for screen readers and displays if the image fails to load.
• srcset: This optional attribute allows you to specify a list of different images for responsive design, optimizing loading times by displaying the appropriate image size based on the user's device.
• loading: This attribute defines the loading behavior of the image. You can choose between "eager" (the default) or "lazy" loading, where lazy loading defers the loading of off-screen images until they are close to the viewport, improving performance.
• referrerpolicy: This optional attribute controls the referrer information sent when the image is fetched, enhancing privacy and security.
• fetchpriority: This attribute allows you to set the priority of fetching the image, with values like high , low , or auto , which is the default.
• width: This optional integer attribute determines the width of the image in pixels.
• height: This optional integer attribute determines the height of the image in pixels.
• sizes: This optional attribute specifies the intended display size of the image for different viewport conditions, helping browsers choose the right image to load.
• ismap: This optional attribute makes the image act as a server-side image map, allowing for clickable areas within the image.
• decoding: This optional attribute refers to the process of converting encoded or encrypted data back into its original format, with default behavior as specified by the browser.

RTL LTR

<.image
  src="http://example.com"
  alt="Mishka Chelekom image"
  srcset="http://example.com 300w,
    http://example.com 600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  loading="lazy"
  ismap
  decoding="async"
  fetchpriority="high"
  referrerpolicy="no-referrer"
  width="300"
  height="200"
/>

Shadow prop in Phoenix liveView Image component

The shadow prop in the Mishka Chelekom Image Component allows us to add shadow effects to images, enhancing their visual appeal and depth. By using values like extra_small , small , medium , large , and extra_large , developers can easily apply different shadow styles, from subtle to bold, to their images. This functionality ensures that images can be customized to fit the overall design aesthetic of the application while maintaining a consistent and polished look. Additionally, you can use this function to add your own custom or Tailwind CSS shadow classes, providing even greater flexibility in styling your images. By default, it is nil , so no shadow will be added to the image.

RTL LTR

<.image src="/path" shadow="extra_small" />
<.image src="/path" shadow="small" />
<.image src="/path" shadow="medium" />
<.image src="/path" shadow="large" />
<.image src="/path" shadow="extra_large" />

Rounded prop

The rounded function in the Mishka Chelekom Image Component allows us to apply border-radius effects to images, giving them smooth, rounded corners. By using values like extra_small , small , medium , large , and extra_large , developers can easily apply different levels of corner rounding, from slightly rounded edges to fully circular shapes. This feature ensures that images can be customized to fit the overall design aesthetic of the application while maintaining a consistent and polished look. Additionally, you can use this function to add your own custom or Tailwind CSS border-radius classes, offering even greater flexibility in styling your images. By default, it is nil, so no border-radius will be applied to the image.

RTL LTR

<.image src="/path" rounded="extra_small" />
<.image src="/path" rounded="small" />
<.image src="/path" rounded="medium" />
<.image src="/path" rounded="large" />
<.image src="/path" rounded="extra_large" />