Need to modify image feature of a teaser component

[Kaibalya_123]

In the teaser, I am able to use image. But I wanted to add some extra div class while displaying image. When I check the teaser.html, this refers to the image.html file in the same component. Whereas image.html file only this code:

<sly data-sly-template.image="${@ teaser}">
    <div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}"></div>
</sly>

How can I modify these parts?

Note: I have modified my custom image component as per the requirement. The same way I need to modify the image which is present in the teaser component.

Thanks in advance.

[B_Sravan · Accepted solution]

Hi @Kaibalya_123,

In that image.html, the given snippet is an example of an HTL template tag. If you want to customize this,
please create an image.html file at your component place.

for example:
If you are component path is, apps/my-project/my-component, then create an image.html under apps/my-project/my-component/. (so the image.html is a sibling node to your my-component.html).

As per sling resource resolution, the one under apps takes precedence over it resourceSuperType and hence you can customize your "image.html"

Note: 

1. Please do not change any value under libs/*
2. Make sure you are using your own variable for your use API.

3. The teaser is the variable used in the core component teaser component for its sling model, please be aware of it and use the variable that you are using to call your sling model.

Regards,

Sravan