How to add a ‘data-*’ attribute when using Object.assign to create an html element

I have the following code:

let item = Object.assign(document.createElement('img'), {
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
});
item.setAttribute('data-showtime', data.duration)

I want to set a data attribute in the object assign, instead of separately. I tried dataset: { showtime: data.duration }, but that results in the following typeerror TypeError: setting getter-only property “dataset”

Thanks in advance!

Answer

Maybe this might be a nicer way to do this, if all you want is to set attributes to the image element.

const imageRef = document.createElement('img');

Object.entries({
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
    'data-showtime': data.duration
}).forEach(([key, value]) => {
    imageRef.setAttribute(key, value);
});