Switch img source, which lies in /static

Jones-S
3
Jones-S
commented 8 months ago

Hi there

I used to display a logo in my vue component like this:

<img class="Logo__image" src="~/static/media/logo.svg" alt="Logo Image">

Now I would like to switch the logo source when open a Menu overlay ( I need it's colors inverted).

I thought I could do this:

<img class="Logo__image" :src="navMenuOpen ? '~/static/media/logo-white.svg' : '~/static/media/logo.svg'" alt="Logo Image">

But now the ~/ is not doing it's magic to access the file (e.g. like: <img src="/_nuxt/media....)
I tried to use the require function directly but so far I had no success.

So I could really need a hint to the right direction.

Thanks in advance.

Cheers

0
joostdecock
230
joostdecock
commented 8 months ago

Why do you need the ~/ for an image src attribute? Can't you just use /media ?

0
Jones-S
3
Jones-S
commented 22 days ago

Wow 8months ago. How could I miss that.
Well thanks for the answer… I don't exactly know. I would always use the static folder… Why else would we use the ~/static then? Everything that's static could live inside /media or /fonts etc.
But maybe you can share some insights on the difference and on the purpose of ~/static.

Cheers

0
Informations
QuestionUnresolved
#c78 - Created 8 months ago