Image width renditions breaks when using Vue.js | Community
Skip to main content
H
herbergt
October 30, 2020
Solved

Image width renditions breaks when using Vue.js

  • October 30, 2020
  • 1 reply
  • 1309 views

The image width renditions functionality of the image core component breaks when using with Vue.js

The error says as follows

 

Uncaught TypeError: Cannot read property 'removeAttribute' of null at unwrapNoScript (clientlib-base.js:1877) at init (clientlib-base.js:1797) at new Image (clientlib-base.js:2000) at HTMLDocument.onDocumentReady (clientlib-base.js:2007)

 

The error happens right here.

 

The div with the id app is being used as the Vue main template. This Vue template encompass the whole page body of the page core component.

 

<div data-sly-attribute.id="app" data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer" data-sly-repeat.child="${templatedContainer.structureResources}" data-sly-resource="${child.path @ resourceType=child.resourceType, decorationTagName='div'}"></div>

 

 

Tracing down the problem I found that the Vue.js is changing the HTML of the nonscript tag generated by the image core component, stripping off the white spaces that the component generates. When the clientlib of the image core component tries to get the generated tag image, it uses the textContent of the element as follows that._elements.noscript.textContent.trim() , but it retrieves and empty text instead of the text with the image tag, because Vue had previously removed the white spaces. This causes the clientlib to break here.

 

Here the link to reproduce the issue. Please check the console to spot the issue.

https://jsfiddle.net/herbergt/xgtzya5k/16/

 

Any workaround to solve this?

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anudeep_Garnepudi

Hi @herbergt 

Generally content inside noscript tag will be rendered as string/text. In you case somehow it is converting to HTML is seems after instantiating the Vue. One thing you can do is in place of textContent use innerHTML as mentioned below. Which will be consistent.

that._elements.noscript.innerHTML.trim()

Hope this helps!

AG

1 reply

Anudeep_Garnepudi
Community Advisor
Anudeep_GarnepudiCommunity AdvisorAccepted solution
Community Advisor
November 2, 2020

Hi @herbergt 

Generally content inside noscript tag will be rendered as string/text. In you case somehow it is converting to HTML is seems after instantiating the Vue. One thing you can do is in place of textContent use innerHTML as mentioned below. Which will be consistent.

that._elements.noscript.innerHTML.trim()

Hope this helps!

AG

AG
    H
    herbergtAuthor
    November 3, 2020
    Thanks for the response @anudeep_garnepudi, this is not possible for me because this is code of the the third party clientlib of the image core component.
    Terms & ConditionsAccessibility statement

    Loading footer...