solid img tags lose props on nested components

Describe the bug

I have some some images with like:

<img 
class="flex-shrink-0 mx-auto rounded-full w-32 h-32" 
is="img-cache" 
expire="86400" 
url="https://images.unsplash.com/photo-1727713274972-d1d138ea0569?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" 
width="100" 
height="100"
 alt="" />

one script I use which will run as custom element and is included globaly via index.tsx change the prop url to src which will be the cached image as database64 string like:

<img 
class="flex-shrink-0 mx-auto rounded-full w-32 h-32" 
is="img-cache" 
expire="86400" 
url="https://images.unsplash.com/photo-1727713274972-d1d138ea0569?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" 
width="100" 
height="100" 
alt="" 
src="data:image/jpeg;base64,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">

Also I have this in use:


declare module "solid-js" {
    namespace JSX {
        interface ImgHTMLAttributes<T> {
            is?: string;
            expire?: string | number;
            url?: string;
            lazy?: boolean;
        }
    }
}

Once i use it in the "main" component that is directly called from the Router > Route I get the url prop and also the src attached from my script. But once I use it in some child components, the url will never rendered.

output will be like

https://..... URL OF IMAGE....
<img is="img-cache" expire="86400" width="100" height="100" class="rounded-md w-16 h-16" alt="user avatar">

origin code to debug like:

<Show when={user.data}>
                {(user) => (
                    <div class="flex flex-col items-center gap-3">
                        <h3 class="font-bold">Hi {user().displayName}!</h3>
                        <Show when={user().photoURL}>
                            {user().photoURL}
                            <img is="img-cache" expire="86400" url={user().photoURL} width="100" height="100" class="rounded-md w-16 h-16" alt="user avatar" />
                        </Show>
                        <p>Your userID is {user().uid}</p>
                        <Logout />
                    </div>
                )}
            </Show>

I have checked it multiple times, the variable is there to fill the url prop and as it works on the "main" component called from the route directly, it should be a Bug, when it is not working on nested components.

Your Example Website or App

Steps to Reproduce the Bug or Issue

all described already in "Describe the bug" block

Expected behavior

the <img/> tag should be rendered the same way as in the main component.

Screenshots or Videos

Does not work in nested Components:

working: direct called component via route:

Platform

OS: [e.g. macOS, Windows, Linux] all three
Browser: [e.g. Chrome, Safari, Firefox] chrome, chomium, firefox
Version: [e.g. 91.1] latest currently 129.0.6668.60 from chome

Additional context

https://github.com/solidjs/solid/discussions/2317

EDIT: 2024-10-02 10:36 CEST

Also the Props data-*="xxx" will get removes on child components but will in output on "main" component called via route.

EDIT 2024-10-02 11:03 CEST

It looks only for custom <img is="img-cache".../> to be the problem

EDIT: 2024-10-02 12:46 CEST

Add demo app build with sourcemap demoapp.zip

It looks like in Profile135415457278656946752.js it sets the values, but because it is not set via setAttribute("url", ... is does not rendering here in the nested component. r.url=e.e=t would not put the content.

But while the other templates are rendered differently when called directly it is only on the nested components.

Update 2024-10-02 13:06 CEST build without minify enabled: demoapp2.zip

Oct 02 '24 07:10 Dexus

Here my TypeScript for the Image Cache:

Sorry if the script is based for mobile app building with capacitor. But it works as well while developing on the normal browser.

import { Directory, Encoding, Filesystem } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';
import path from 'path';

const CACHE_KEY = 'cached-images';

let observer;
let cacheData;
let saveRequired;

class ImageCache extends HTMLImageElement {

    constructor() {

        super();

        if (this.hasAttribute('clear')) {
            clearCacheData();
        }

        if (this.hasAttribute('lazy')) {
            observer.observe(this);
        }
        else {
            setSource(this);
        }

    }

}

(function () {

    observer = new IntersectionObserver(intersectionCallback);

    window.customElements.define('img-cache', ImageCache, { extends: 'img' });

    requestIdleCallback();

})();

function intersectionCallback(entries, observer) {
    entries.forEach(entry => {
        console.log(entry);
        if (entry.isIntersecting /*&& !entry.target.src*/ && entry.target.url) {
            setSource(entry.target);
        }
    });
}

function requestIdleCallback() {
    window.requestIdleCallback(saveCacheData, { timeout: 3000 });
}

function setSource(node) {

    let url = node.getAttribute('url');
    let mySrc = node.getAttribute('src');
    let expire = node.getAttribute('expire');

    console.log("setSource", url, mySrc, expire)
    if (!url) {
        url = mySrc;
    }
    console.log("setSource", url, expire)
    makeLink(url, expire).then(link => node.src = link);

}

async function clearCacheData() {

    await Preferences.remove({ key: CACHE_KEY });

    cacheData = [];

}

async function loadCacheData() {

    let obj = await Preferences.get({ key: CACHE_KEY });

    cacheData = (obj.value ? JSON.parse(obj.value) : []);

}

async function saveCacheData() {

    if (saveRequired) {

        saveRequired = false;

        await Preferences.set({ key: CACHE_KEY, value: JSON.stringify(cacheData) });

    }

    requestIdleCallback();

}

async function makeLink(url, expiration) {

    if (!cacheData) {
        await loadCacheData();
    }

    let index = findIndex(url);

    let isCached = index != -1;

    if (isCached && isExpired(cacheData[index].expiration)) {

        await deleteFile(cacheData[index].file);

        removeFromList(index);

        isCached = false;

    }

    try {

        if (!isCached) {
            throw new Error();
        }

        return await readFile(cacheData[index].file);

    }
    catch (error) {
        return await downloadImage(url, expiration);
    }

}

function findIndex(url) {
    return cacheData.findIndex(entry => entry.url == url);
}

function isExpired(expiration) {
    return expiration && Date.now() > (new Date(expiration)).getTime();
}

async function readFile(filename) {

    let contents = await Filesystem.readFile({ path: filename, directory: Directory.Cache, encoding: Encoding.UTF8 });

    return contents.data;

}

async function writeFile(filename, data) {
    return await Filesystem.writeFile({ path: filename, data: data, directory: Directory.Cache, encoding: Encoding.UTF8 });
}

async function deleteFile(filename) {
    return await Filesystem.deleteFile({ path: filename, directory: Directory.Cache });
}

function removeFromList(index) {

    cacheData.splice(index, 1);

    saveRequired = true;

}

function addToList(url, filename, expiration) {

    let date = (expiration ? (new Date(Date.now() + expiration * 60000)).toISOString() : null);

    cacheData[cacheData.length] = { file: filename, expiration: date, url: url };

    saveRequired = true;

}

async function downloadImage(url, expiration) {

    let response = await fetch(url);

    let blob = await response.blob();

    let link = await blobToBase64(blob);

    let filename = uid() + path.extname(url);

    await writeFile(filename, link);

    addToList(url, filename, expiration);

    return link;

}

function blobToBase64(blob) {

    return new Promise((resolve, reject) => {

        const reader = new FileReader();

        reader.onloadend = () => resolve(reader.result);

        reader.readAsDataURL(blob);

    });

}

function uid() {
    return Math.random().toString().substr(-8) + Date.now().toString().substr(-12);
}

Oct 02 '24 10:10 Dexus

When in need to control if something is a prop or an attribute, you can use any of the following: https://docs.solidjs.com/reference/jsx-attributes/attr https://docs.solidjs.com/reference/jsx-attributes/prop https://docs.solidjs.com/reference/jsx-attributes/bool

Trying to guess, I suppose url is set as a prop instead of as an attribute. Id try changing the bits of const url = img.getAttribute(...) for const url = img.url

A playground repro would be welcome https://playground.solidjs.com/

Oct 02 '24 16:10 titoBouzout

@titoBouzout thank you, I have now created a own Image Tag, that catch the informations via

import { makeLink } from "@lib/imgCache";
import { ComponentProps, createEffect, createSignal, JSX, onMount, ParentComponent, Show, splitProps } from "solid-js";
const ImgCached: ParentComponent<
    ComponentProps<"img"> & {
        is?: string | undefined;
        expire?: string | number | undefined;
        url?: string | undefined;
        lazy?: boolean | undefined;
    }
> = (props) => {
    const [isImageLoaded, setImageLoaded] = createSignal(false);
    const [local, attrs] = splitProps(props, ['is', 'expire', 'url', 'lazy']);
    let url: string;
    let returnURL: string;
    let expire: any;
    onMount(async () => {

        if (local.url) {
            url = local.url;
        } else if (attrs.src) {
            url = attrs.src;
        }
        if (local.expire) {
            expire = local.expire;
        }

        await makeLink(url, expire).then(link => {
            attrs.src = returnURL = link as string;
            setImageLoaded(true);
        }).catch((e) => console.error(e));
    })
    return <>
        <Show when={isImageLoaded()} >
            <img {...attrs} {...local} src={returnURL} />
        </Show>
    </>
        ;
};

export {
    ImgCached
};

this works for now, but I still have problems with the attr:mynewAttribute=120 because its not rendered or in my setup it dont find the types... I'm not sure, I use vite with rollup and typescript.

I'm missing maybe as its my first time with solidjs some examples that are showing how it works, the ones I have checked and tried to update, where all 2+ years old and broken...

Oct 02 '24 19:10 Dexus

this works for now, but I still have problems with the attr:mynewAttribute=120 because its not rendered or in my setup it dont find the types... I'm not sure, I use vite with rollup and typescript.

Attributes are case-insensitive, mynewAttribute will become mynewattribute.

I cannot seem to be able to reproduce, the attributes are rendered https://playground.solidjs.com/anonymous/8cd98070-c00f-42ca-ac2a-b46a8d92fb20

Included in the link an example on how to type attr: and theres a PR for adding is to HTMLAttributes typings https://github.com/ryansolid/dom-expressions/pull/363/files

Oct 04 '24 15:10 titoBouzout

@Dexus Is this still an issue?

Oct 21 '24 00:10 titoBouzout

Closed as stale as above it appears it can't be reproduced. Reopen if still an issue.

Apr 30 '25 20:04 ryansolid