BrandImage parser does not work with small images

[guimou]

In the following code:

odh-dashboard/frontend/src/components/BrandImage.tsx

Line 19 in 6b956b3

const parsed = parser.parseFromString(src, 'text/xml');

the parser checks for XML errors.

However I found that the check always fails with small images. (took me a while to figure this out...)

That's because since Webpack 5, asset modules have a default size threshold (usually 8 KB). So if an SVG file is smaller than this threshold, it is directly inlined as a data:image/svg+xml;... URI. Larger SVGs are emitted as separate files.

So as small files sources are already inlined/converted, the following is not necessary (on top of the Parser check failing):

odh-dashboard/frontend/src/components/BrandImage.tsx

Line 21 in 6b956b3

newSrc = `data:image/svg+xml;base64,${btoa(src)}`;

Two choices:

• Modify the component to check for src type first before trying to inline it.
• Modify webpack configuration to never inline SVGs as data. However, this may break some other components...

[guimou]

The error may not be in this check. In fact, although image.isValid is always true whatever the source of the image (url or inline), this return is always triggered by inline images:

odh-dashboard/frontend/src/components/BrandImage.tsx

Line 30 in 6b956b3

if (!image.isValid) {