Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Image is not shown up in editor

Avatar

Level 2

sarals5375154_1-1662814819042.png

 

The image is working fine in the side panel, but when I drag and drop it is not loading up

9 Replies

Avatar

Community Advisor

Please inspect the image and check the src attribute of <img> tag. Also please confirm if its custom component or core component.

Avatar

Level 2

I am following this tutorial
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

Page and Templates
    Update the Header and Footer with Experience Fragments

 

 

On inspect

sarals5375154_0-1662819744979.png

there is no `img` tag

Avatar

Level 2

this is a core component, and I have also added screen shots in previous comment reply for that 

Avatar

Community Advisor

it's quite possible that your JSP or Sightly HTL code is incorrectly embedding the image to the page; check the scripts and try again.
What does the <img src=""> actually produce?

Avatar

Community Advisor

sarals5375154_0-1662819744979.png

 

from looking at your inspect element, you must make changes to your component to output <img HTML element instead of the div.


Avatar

Level 2

this is my HTL code 

sarals5375154_0-1662838211976.png

 

sarals5375154_1-1662838319558.png

This is `view as published`

when I click on this pencil Icon

sarals5375154_0-1662839318722.png

I am able to see image

sarals5375154_1-1662839349009.png

 but after that when I click on tick it again broken!!

Avatar

Level 2

Actually, I am new to AEM, currently, I am learning, so I don't know where to make changes 

Avatar

Community Advisor

It seems, width and quality are missing from url

/content/aemlab/oneweb/reference-content/image/_jcr_content/root/container/container/image.coreimg.85.320.png/1662817203843/banner-2.png 

can you check the policies of image?

 

Example

arunpatidar_0-1662893944104.png

 



Arun Patidar

Avatar

Level 2

Here are the properties of the image component

MuddleldLuck_0-1662898846774.png

 

and here are the properties of the Image that I am using

 

MuddleldLuck_1-1662898894057.png

 

I am not sure by the word `polices`, so when I view it as published I get this image URL

```/content/experience-fragments/wknd/us/en/site/header/master/_jcr_content/root/image.coreimg.svg/1662898582023/wknd-logo-dk.svg```

MuddleldLuck_3-1662899036625.png