Image
Discover and learn how to customize the image component in Momen.
Introduction
This tutorial introduces the attributes of image components, as well as how to set up images and bind data.
Application
The image component is used to display avatars, product images and more.
Image Design & Crop Mode
In the following example, the size of the picture component is 343*152. When the picture crop mode is "Full Image", the picture will scale proportionally to fit the component, displaying the complete content with a background color outside the image. When the crop mode is "Fill Space", the image will be scaled to entirely fill the component, cropping any excess outside.
![The crop mode of image component in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252Fy4CKOqJ8Eu8yLybcAPiO%252F1.gif%3Falt%3Dmedia%26token%3D99f9c711-c62a-4460-a95e-d235bd140ea4&width=768&dpr=4&quality=100&sign=d0791e75&sv=1)
Image Content
Local Data
As shown in the image below, when the image source is set to "Local Upload," you can upload images directly by clicking on the image area. The uploaded image will be previewed.
![Upload image from local data in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FhV63HxEy0JpCKVtF5R2b%252F2.png%3Falt%3Dmedia%26token%3D09412246-0bfa-4019-b31c-e28db551b489&width=768&dpr=4&quality=100&sign=bba13de5&sv=1)
Tips: The size of the uploaded image can not exceed 30000px. The total pixels can not exceed 250 million px (width x height of the image).
Pixels of dynamic images (e.g. GIF images) are calculated as width * height * frames; pixels of non-dynamic images (e.g. PNG images) are calculated as width * height.
Data Binding
Tips:External data can only be bound if it is an image. Only a single image can be bound.Image file formats supported by Momen: jpg, png, svg, webp, gif
As shown in the image ⬇️, to bind an image, select "Data Binding," and click the "+" sign.
![Bind the image data in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FnnBgz79uMEtfSnwHkuRq%252F3.png%3Falt%3Dmedia%26token%3D7a0b2228-f4df-4ba9-af0f-ceeb8591bdbf&width=768&dpr=4&quality=100&sign=65e71621&sv=1)
SEO Alt Text
You can set alt text for the image component. The alt text functions as tags containing textual information about the image, which can assist search engines in understanding the image's content, helping with website Search Engine Optimization (SEO) to achieve higher rankings.
![Setting alt text in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FAlZhmGY6riIwFwI49svQ%252F4.png%3Falt%3Dmedia%26token%3D17f2f9d4-5cc1-41e1-b30f-bab3626a9e73&width=768&dpr=4&quality=100&sign=53d0d7b6&sv=1)
Displaying Mock Assets
When the data source is dynamic data, it means it is sourced from a database through remote data or item data and would not show on canvas. However, you can employ mock assets to visualize the image's size and position during development (this is only visible in the Momen editor).
As shown in the following image ⬇️, select the type of mock assets displayed in the "Preferences" at the user center.
![Displaying mock assets in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FM9FNGSOB9aN7lnKDb25v%252F5.png%3Falt%3Dmedia%26token%3Dd9865b21-5f65-4f85-912d-657b59f57e22&width=768&dpr=4&quality=100&sign=dbac2cc&sv=1)
The two virtual material display styles are shown below:
![Mock assets in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FAKdxHvO1mIZbQBOpfwxb%252F6.jpeg%3Falt%3Dmedia%26token%3D6da84c9b-d40d-4142-a276-ceb36e6d9bb4&width=768&dpr=4&quality=100&sign=e0b48a01&sv=1)
![Mock assets in a no-code tool](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FJ84cjFEonpBUjRQIAAzy%252F7.jpeg%3Falt%3Dmedia%26token%3D0bcd5461-9ef8-4df5-8e02-8338079260bd&width=768&dpr=4&quality=100&sign=3ee2f9c0&sv=1)
Additional Functions of Images
You can zoom in and download, and forward the image by clicking the image on your phone. For more information, please refer to the tutorial Image Downloading.
If you encounter any issues during the process, feel free to join our Discord community for assistance.
About Momen
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
Last updated