Jdenticon doesn't render my icons

Symptoms

There are multiple error descriptions for this issue:

Background

If you are using the UMD build of Jdenticon (jdenticon.js or jdenticon.min.js) the library will find all icon placeholders and have them rendered when the page is loaded. This will happen once the DOMContentLoaded or window load event is raised (whichever comes first). To give other scripts a chance to do their stuff, the rendering is scheduled as a macro task when the event is raised.

This won't work if:

Solution 1

There are ready to use libraries or code snippets for the frameworks listed below.

Solution 2

If the used framework is not listed above, or if plain JavaScript is used, you need to update the icon on demand. Here are some possibilities:

Solution 3

Since version 2.1.0 Jdenticon can detect when <svg> and <canvas> elements are inserted onto the page dynamically and then trigger a render without manually calling jdenticon.update().

To enable this feature, set replaceMode to observe before the Jdenticon library is loaded. See the example below how this is done in vanilla JavaScript. Please note that this feature is not supported in IE10 and earlier.

Enable observe mode

<script>
    window.jdenticon_config = {
        replaceMode: "observe"
    };
</script>
<script src="https://cdn.jsdelivr.net/npm/jdenticon@3.3.0"></script>

If you use Webpack or Browserify you need to ensure jdenticon_config is set before loading Jdenticon.

This feature utilizes mutation observers. If you notice any slowdown using this approch, consider using solution 1 instead.