sightly component with drag and drop image

<div class="flex-row"> <div class="half-size float-left"> <div data-sly-resource="${'promo1image' @resourceType='foundation/components/image'}"></div> </div> <div class="half-size float-left"> <h3 data-title="${properties.jcr:textTitle1 || 'Title placeholder 1'}">${properties.jcr:textTitle1 || 'Title placeholder 1'}</h3> <p class="description">${properties.jcr:textDescription1 || 'Text placeholder. Description1'}</p> </div> <div data-sly-resource="${granite.resource.path @ resourceType='wcm/foundation/components/parsys'}"></div> </div>

Why when I drag and drop an image it's replicated (not a component, just an image) and this image is not added in /content/my_page.
This picture added at the end of my Sightly (HTL) component:

<div class="image cq-analyzable parbase"> <div id="cq-image-jsp-/content/alexpi-test/ap-test-flex-two-column/jcr:content/par/flexpromotionblock/promo1image"> <img src="/content/alexpi-test/ap-test-flex-two-column/_jcr_content/par/flexpromotionblock/promo1image.img.jpg/test.jpg" alt="file" title="" class="cq-dd-image"> </div>....</div>