Issue #2705✓ SolvedOpened April 7, 2020by andy-aware2 reactions

Adding image sizes to image

Quick answerby artf2

@awaredigital probably the best solution would be to follow the suggestion to listen up to src changes, then find the right asset and update attributes accordingly

Read full answer below ↓

Question

When I add an image attribute to the page I noticed that inside of the component the image has attributes to it. When I call my images into the asset manager I do it like the following: However, the height and width aren't available when the image gets added to the canvas. I've tried to get the sizes by doing: component.views[0].el.height and adding it to the object, but every time I try I get 0 because the image isn't available in the DOM yet, so it doesn't know what size it is. Is there a way to pass these heights and widths to the image, I need this for some lazy load functions I'm doing....

Answers (3)

👍 Most helpfulartfApril 20, 2020

@awaredigital probably the best solution would be to follow the suggestion to listen up to src changes, then find the right asset and update attributes accordingly

pouyamiralayiApril 9, 2020

Hi @awaredigital checkout #2696 comment which is updating the styles whenever the src changes. Cheers!

andy-awareApril 9, 2020

Hi @pouyamiralayi, thanks for the answer but that isn't what I'm looking to do. I'm looking to add height and width to the image element itself. So for example at the moment, the image goes in like this: <img src="http://placehold.it/350x250/459ba8/fff/image2.jpg" id="123" /> What I want to do is i...

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.