EDIT: Я нашел решение для этой точной проблемы (которая не связана с проблемой "дублирования"). Я напишу в нижней части этого вопроса, так как я больше не могу добавить ответ, только отредактировать.

При использовании D3 я добавляю изображения в SVG из динамического источника данных. Что-то вроде этого:

var images = [
  'https://avatars2.githubusercontent.com/u/339630?v=3&s=460',
]

d3.select('svg')
  .data(images)
  .append('image')
  .attr('xlink:href', function(d) { return d; })
  .attr('width', 200)
  .attr('height', 200)

Когда изображение не существует, оно отображает сломанное изображение:

Как вообще ничего не сделать? Я знаю, что могу сделать что-то вроде этого:

const img = $('<img>')
img.on('load', () => {
    // image exists! use it...
})
img.on('error', () => {
    // image does not exist. do nothing...
})
img.attr({ src: 'the url' })

Но я не понимаю, как использовать эту технику с data D3 и enter.

Решение:

        node.append('image')
            .attr('id', (d, i) => 'image-' + i)

        data.forEach((d, i) => {
            const src = d.src
            var imgTest = new Image()
            imgTest.onload = function() {
                svg.select('#image-' + i).attr('xlink:href', src)
            }
            imgTest.onerror = function() {
                // imgTest.src = "fallback image url"
            }
            imgTest.src = src
        })