html string added in template form treated as string, not html

[kylebakerio]

        function Carousel(props) {
            let images = props.images.split(",");
            images.map(image => image.trim());
    
            let mainImage = `<img src="${images[0]}"></img>`;

            let minis = "";
            images.forEach(imageUrl => {
                minis = minis.concat(`<img class="mini" src="${imageUrl}"></img>`)
            })

            console.log('a',images,minis)
            
            console.log(html`
                <div class="carousel">
                    <div class="main">
                        <img src="${images[0]}"></img>
                        ${mainImage}
                        <p class="description">
                            Tro rilata fundamenta tabelvorto ik, o pre frazo iometo interalie. Dum otek iliard malsupera il, pro gh neigi gentonomo. Aliam multe poste ke bio, bo aha jeso samideano. Usono laŭlonge si kuo, ju apud anstataŭ ligvokalo ial, ikso tempo ut nur. Mo alta numeralo eks, timi pebi frazetvortigo no nen. Anti neniu tuj so, kapabl respondeci prepozitivo op fri.
                        </p>
                    </div>
                    <div class="minis">
                        ${minis}
                    </div>
                </div>
            `)
        }

specifically, notice these children:

                        <img src="${images[0]}"></img>
                        ${mainImage}

Even though they're identical input, one is converted to a string child, one is converted to a vdom object.

This is pretty annoying. For something this small, I don't want to create a preact element. I find it weird that this option isn't available. Am I missing something? Why does htm not allow this to be parsed as html but insist on keeping it as a string?

[rschristian]

Even though they're identical input, one is converted to a string child, one is converted to a vdom object.

Not at all, one is in fact a string, while the other is a vdom object.

To make them equal, you want this:

let mainImage = html`<img src="${images[0]}"></img>`;

---

html is what's called a tagged template, which is a way to parse an input with a function. Therefore, it's html that transforms the string content into the vdom representation. Without it, it's just a string.