How to extend the image asset type to add custom attributes?
Put it in a plugin if you need to update also the already defined assets
Read full answer below βQuestion
Hello, I'm trying to make a simple modification to the default image asset and am running into a wall, and am sure I'm missing something simple. I need the image element to have an additional attribute that I pass into it, called mySpecialId. I can't figure out how to get the asset to render this into the DOM. I think I'm supposed to extend the image type like this, and I think I should be using the updateTarget method like this: But it's not working. When I click on the image, nothing happens. I think that's because I'm replacing the base updateTarget logic in the image, whereas I want to ex...
Answers (1)
editor.AssetManager.addType('image', {
view: {
attributes: { 'custom-attr': 'custom-value' }
}
});
Put it in a plugin if you need to update also the already defined assets
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1044
Change src for image element in model
hello when a image block drop to editor i hide the default asset manager and display my custom asset manager: fot this i have no problem.bu...
Issue #2741
How to wrap component with text nodes based on trait?
Hello @artf , I'm not sure if this goes here but I can't figure out from the documentation how to update the component model based on a tra...
Issue #2697
Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Issue #634
How can I pass content with script?
I made custom component like this way and used script as well then script is working fine but I am not able to select component. Is there a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component β click to select, then one-click fix.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners β this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.