[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements\u002Fimage-objects":3},{"id":4,"title":5,"body":6,"category":221,"description":222,"extension":223,"keywords":224,"meta":232,"navigation":235,"order":236,"path":237,"seo":238,"stem":239,"updated":236,"__hash__":240},"help\u002Fhelp\u002Fdesign-elements\u002Fimage-objects.md","Image objects",{"type":7,"value":8,"toc":211},"minimark",[9,17,20,25,28,33,36,38,42,45,55,57,61,64,69,71,75,78,83,86,89,94,97,107,109,113,116,121,127,130,135,140,143,151,156,161,164,166,170,173,178,181,186,189,194,196,200,203,206],[10,11,12],"p",{},[13,14],"img",{"alt":15,"src":16},"","https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67d8392c8775b146f439192f\u002Ffile-y6th2IfGZp.jpg",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"image-library","Image library",[10,26,27],{},"Before you can add an image to your project, you have to upload it to your personal image library.",[10,29,30],{},[13,31],{"alt":15,"src":32},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67d839b84f98ba5a7ab3a810\u002Ffile-bIZHZOmIxt.jpg",[10,34,35],{},"To add an image to the canvas, click on the image in the library and then click and drag the image across the canvas.",[18,37],{},[21,39,41],{"id":40},"supported-formats","Supported formats",[10,43,44],{},"You can upload PNG, JPG, JPEG, WEBP and SVG files.",[46,47,48],"blockquote",{},[10,49,50,54],{},[51,52,53],"strong",{},"Tip","\nSVG files will be displayed as regular image objects. They will not be converted into editable paths.",[18,56],{},[21,58,60],{"id":59},"how-to-connect-an-image-input-field","How to connect an image input field",[10,62,63],{},"If you want to enable a user to edit the source image of an image object, you need to connect an input field to the 'Image Source' property.",[10,65,66],{},[13,67],{"alt":15,"src":68},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67dd9a882c320e1178ed1a9b\u002Ffile-fZWz1nvMqR.jpg",[18,70],{},[21,72,74],{"id":73},"image-source-property","Image source property",[10,76,77],{},"An image object and the image being displayed are two different things. Think of the object as a frame and the image within is defined by the Image Source property of the object.",[10,79,80],{},[13,81],{"alt":15,"src":82},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e148708c119e082b2fc696\u002Ffile-IntO06E5Un.jpg",[10,84,85],{},"The Image Source property is more complex than most other properties. Its value is not just a single number or string. While Easy Mode is enabled, much of this complexity is hidden, and you can simply edit the source image or the cropping using the two buttons.",[10,87,88],{},"If you disable Easy Mode, you gain access to the full property.",[10,90,91],{},[13,92],{"alt":15,"src":93},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e149ae4d0d075dbad0af5e\u002Ffile-X4TvqmdINs.jpg",[10,95,96],{},"The Image Source is an object with this structure:",[98,99,104],"pre",{"className":100,"code":102,"language":103},[101],"language-text","{ \nsrc: \"https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F1be32f4d-e2c7-4321-   9ab3-b094a4e84000\u002Fpublic\", \ninnerPos: [0, 0], \nscale: 1, \ninnerRotate: 0 \n}\n","text",[105,106,102],"code",{"__ignoreMap":15},[18,108],{},[21,110,112],{"id":111},"fill-mode-property","Fill Mode property",[10,114,115],{},"The Fill Mode defines how the source image is displayed within the bounding box of the image object. There are three different modes:",[10,117,118],{},[13,119],{"alt":15,"src":120},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e152658c119e082b2fc6d0\u002Ffile-yGBY2UduSx.jpg",[10,122,123],{},[124,125,126],"em",{},"Cover Mode",[10,128,129],{},"Cover Mode is the default setting. It fills the entire bounding box without distorting the image, but some cropping may occur.",[10,131,132],{},[13,133],{"alt":15,"src":134},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e152ffaed7634e63bd0678\u002Ffile-pNbMG7Lj75.jpg",[10,136,137],{},[124,138,139],{},"Contain Mode",[10,141,142],{},"Contain Mode fits the entire source image into the bounding box without distorting it, but the image may be scaled down and might not cover the entire bounding box.",[46,144,145],{},[10,146,147,150],{},[51,148,149],{},"Note","\nThis is usually the ideal Fill Mode for logos.",[10,152,153],{},[13,154],{"alt":15,"src":155},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e153f48c119e082b2fc6d8\u002Ffile-GxPVpWrFxz.jpg",[10,157,158],{},[124,159,160],{},"Stretch Mode",[10,162,163],{},"Stretch Mode fits the entire image to cover the entire bounding box by distorting it.",[18,165],{},[21,167,169],{"id":168},"rounded-images-corner-radius","Rounded images (corner radius)",[10,171,172],{},"Images can have rounded corners by using the corner radius property.",[10,174,175],{},[13,176],{"alt":15,"src":177},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e1558c8c119e082b2fc6e5\u002Ffile-BPK7gcZTo7.jpg",[10,179,180],{},"You can create perfectly circular images by setting the corner radius to a value greater than or equal to half of the width or height, provided the bounding box is square.",[10,182,183],{},[13,184],{"alt":15,"src":185},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e156b0aed7634e63bd0686\u002Ffile-PRiqP7kfgk.jpg",[10,187,188],{},"By default all four corners of the image object will have the same corner radius. Click on the \"Sync Mode\" button to set each corner's radius individually.",[10,190,191],{},[13,192],{"alt":15,"src":193},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e156f43fb0ea7a22c0f027\u002Ffile-IC62o4fJob.jpg",[18,195],{},[21,197,199],{"id":198},"fill-color-property","Fill color property",[10,201,202],{},"The default fill color of images is “None” (no fill color specified). If you set a specific fill color, all visible areas of the image - excluding the transparent areas - will be filled uniformly.",[10,204,205],{},"This is a useful property for recoloring icons.",[10,207,208],{},[13,209],{"alt":15,"src":210},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67e2a9576d2c9d7f89aa3adf\u002Ffile-QRklFmXDI5.jpg",{"title":15,"searchDepth":212,"depth":212,"links":213},2,[214,215,216,217,218,219,220],{"id":23,"depth":212,"text":24},{"id":40,"depth":212,"text":41},{"id":59,"depth":212,"text":60},{"id":73,"depth":212,"text":74},{"id":111,"depth":212,"text":112},{"id":168,"depth":212,"text":169},{"id":198,"depth":212,"text":199},"design-elements","Place images on the canvas, control how they fill their bounding box, round their corners, and recolor them through the fill property.","md",[225,226,227,228,229,230,231],"photo","picture","jpeg","jpg","webp","upload","logo",{"helpscout_id":233,"helpscout_url":234},97,"https:\u002F\u002Flearn.bluepic.io\u002Farticle\u002F97-image-objects",true,null,"\u002Fhelp\u002Fdesign-elements\u002Fimage-objects",{"title":5,"description":222},"help\u002Fdesign-elements\u002Fimage-objects","yAmruTMm_QFIqcXPvRdjdjHk6h5_T51D20vOTuMoE_0",1779983065976]