Tengo un div simple que se supone que contiene una imagen. Para hacer eso, agrego la background-image: url() . La URL de fondo solo se puede agregar a través de JavaScript y no a través de una clase. Para administrar el error, traté de agregar un detector de eventos de error en el div para recibir una notificación cuando la URL no es buena pero no funciona. Me gustaría evitar obtener la URL manualmente.
Verifique el código del fragmento:
const el = document.getElementById('test'); el.addEventListener('error', () => { console.log('ERROR'); }); el.style.setProperty('background-image', 'url(img.png)'); .default { height: 84px; width: 112px; background-color: green; border-radius: 3px; cursor: pointer; } <div id="test" class="default"></div>Puede usar una imagen oculta para capturar el error:
<img id="image"> const img = document.getElementById('image'); img.addEventListener('load', event => { el.style.setProperty('background-image', `url(${event.target.src})`); }); img.addEventListener('error', () => { console.log('ERROR'); }); img.src = 'img.png';