0

Using a package called GrapeJs allowing editor to make dynmaic templates. Recently I upgrade my React Project, below are the packages that I upgraded.

"grapesjs": "^0.18.1",
"grapesjs-preset-webpage": "^0.1.11",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"next": "^13.1.1",
"next-images": "^1.8.4",

Suddenly Images with external urls stopped working, if I download the same image in my local and save it in pulbic folder, it works.

Also images with external urls are working all over the project, just not in GrapeJs logic.

Below is my code :

export const customBlocks = (editordata) => {
    const blockManager = editordata.BlockManager
    blockManager.add('footer1', {
        content: `<img id="ioje" src="https://img.icons8.com/windows/32/00a6a6/left2.png" class="ioje"/>`,
        category: 'Footers',
        attributes: {
            title: 'Predefined Footer',
        },
    })
    blockManager.add('footer12', {
        content: `<img id="ioje" src=${require("../../../public/left2.png")} class="ioje"/>`,
        category: 'Footers',
        attributes: {
            title: 'Predefined Footer1',
        },
    })
}

Here footer1 is not working, as it has an external link image, while footer12 is coming as it is coming from public folder

Jonas
  • 121,568
  • 97
  • 310
  • 388
MochaTesty
  • 5
  • 4
  • Not working how? Is the rendered image src is wrong? The rendered element has width and height of 0? It doesn't appear at all in the DOM? Anything in the devtools console? As a sidenote you have two elements with the same ID which might cause some issues. – Joel Peltonen Jan 03 '23 at 10:54
  • it throws an alt text, and does not renders and image, there is no error in the console – MochaTesty Jan 03 '23 at 12:33
  • What kind of URL does it make in the final DOM element? Ithink next / next-images might be trying to post-process it – Joel Peltonen Jan 03 '23 at 16:26

0 Answers0