Online shape images not appearing in search nor export to png or svg

[LazaroOnline]

Some shape images, like the ones that you can find by searching "sonic", does not appear in the search results when searching in the vs-code extension version of draw.io. The image can be displayed if I edit a file exported from the web with one of those "sonic" images, but it won't appear if exported to png or svg from the extension, instead it will display a black crossed box indicating the image could not be loaded.

This doesn't happen with all images, for example, classic "folder" shape image works fine in search, edit and export.

It's worth noting that the current desktop version of draw.io (13.7.3) is also unable to find results for the keyword "sonic", but it does export the images properly when using a .drawio file created from the web app.

See the image here:

Tested in VS-Code 1.49.3, in an updated Windows 10 64-bit. vscode-drawio v1.0.0

[hediet]

This is what the internal node looks like:

<mxCell id="pTpvPYB41OE36m-QYxgg-1" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn2.iconfinder.com/data/icons/icontober/64/Inkcontober_Run-128.png" vertex="1" parent="1">
    <mxGeometry x="90" y="370" width="128" height="128" as="geometry" />
</mxCell>

I guess there is some problem with the url. I highly recommend to not use this feature, as your diagram becomes reliable on that external service. Instead, you should embed your image! You can just copy&paste it into your diagram.

[LazaroOnline]

I think you are right, the problem is when an image uses an external resource. The problem is that the online version of the app uses external resources in many of the image libraries like the Azure icon library, not just the above toy example.

I would say the issue occurs because the plugin environment permissions are not letting draw.io download those online resources during the export, but ironically the same resource does get loaded by the viewer (because it acts like a web viewer) and the export would be using a different way to perform the download.

The proposed workaround of embedding the images would be a manual process for someone trying to edit diagrams created from the web that can become quite tedious and a problem for a team of maintainers that all would have to become aware of this issue, it also makes the resulting diagram grow in size.

[sirianni]

You can just copy&paste it into your diagram.

Hi @hediet thanks for your work on this awesome extension! Can you clarify how to do this? Whenever I copy/paste the image from Chrome it pastes it as a reference in the diagram. If I paste it in another app first (like OO Writer) then into drawio it is then pasted as a data:image/png;base64 URL. Is there an easy way to copy/paste the image directly into drawio as a data URL?

[hediet]

You can do it like this:

[sirianni]

:exploding_head:

That still seems to have the image reference the URL in drawio though

[hediet]

Sorry, I have not been reading your comment very carefully. From my understanding, Draw.io supports different clipboard formats and depending on the clipboard format, different things happen when data is being pasted.

To really embed an image, you can either make a screenshot of your image and paste the screenshot - with the right screenshot tool, this is a matter of a single key press.

Alternatively, you can just download the image and drag the image into draw.io. If the source is a file on disk, the image should be embedded as base64 data.

[sirianni]

Thanks. I am using Gnome on Linux FWIW.

For others coming across this thread, I did end up finding this which is a way to copy an image as a data URL.