1

I am trying to display a locale SVG file but it keeps showing the alt attribute of the element.

enter image description here

The img tag does have data in the src

enter image description here

this is my import import appleMusic from '../public/Applemusic.svg'

next.config.js

module.exports =
    withImages(
        withTM(
            withFonts(
                {
                    enableSvg: true,
                    webpack(config, options) {
                        return config;
                    },
                })

        )

any idea why this is happening?

Martin
  • 22,212
  • 11
  • 70
  • 132
Maxime Ghéraille
  • 1,465
  • 3
  • 16
  • 31
  • 1
    Your data is base64 encoded; what is the data when it is unencoded? Typically SVG should not be base64 encoded, but really the SVG can be put straight into your HTML. There are lots of examples online for how to do this – Martin Jan 30 '21 at 22:56
  • There will be some useful pointers [on this question](https://stackoverflow.com/questions/10768451/inline-svg-in-css) – Martin Jan 30 '21 at 22:57
  • perhaps the encoded image data doesn't decode to a valid image. – Robert Longson Jan 30 '21 at 22:57
  • Have you tried simply using the SVG's path in the `img`'s source, e.g., ``? – juliomalves Jan 31 '21 at 10:30
  • @juliomalves that worked, only if I use '/Applemusic.svg' and not the relative path to the public folder for some weird reason – Maxime Ghéraille Jan 31 '21 at 10:41

1 Answers1

1

As mentioned in the comments, you can use the SVG's path directly in the img's source.

<img src="/Applemusic.svg" />

Files inside the public/ folder can be referenced by your code starting from the base URL (/).

juliomalves
  • 42,130
  • 20
  • 150
  • 146