VueJs - loading dynamic images

Question

Here is my code which is works as charm as possible:

        <li class="icon-list">
          <img src="../assets/apple.svg" alt="apple" class="icons">
        </li>        
        <li class="icon-list">
          <img src="../assets/google.svg" alt="google" class="icons">
        </li>

I want to do above with dynamic loop. so I've used v-for and using :src and :alt.

    <li v-for="icon in icons" class="icon-list">
      <img class="icons" :src="'../assets/' + icon.src" :alt="icon.alt">
    </li>


export default {
  name: "Home",

  data() {
    return {
      icons: [
        {          
          src: "google.svg",
          alt: "google"
        },
        {          
          src: "apple.svg",
          alt: "apple"
        }
      ]
    };
  }
};

However it does not load any images. Any suggestion?

@BoussadjraBrahim Yes , and still does not load, after :src="require('../assets/' + icon.src)" I'll have a URL like this for image: localhost:8080/assets/google.svg . everything seems well but it does not work — Farzan Najipour
– Farzan Najipour, Commented Jan 27, 2019 at 11:30
Not at all, is it depends on my localhost or what? when I use static <li> I have a URL like this : data:image/svg+xml;base64,PHN2ZyB4 instead of localhost:8080/assets/google.svg — Farzan Najipour
– Farzan Najipour, Commented Jan 27, 2019 at 11:35
I think with src webpack parse the image to base64 instead of a url, while with :src he doesn't because it is getting parsed by vue to a URL, do you have a static public folder in your root path /assets/ with the images in it? and also the fact that there are no errors is weird, you should see the image or get an error that the image path return 404 code. — Art3mix
– Art3mix, Commented Jan 27, 2019 at 11:46

Philip Feldmann · Accepted Answer · 2019-01-27 12:13:46Z

As far as I know what you are trying to achieve isn't possible the way you imagine it to be. Vue templates only have access to attributes of the associated component model at runtime. However, webpack will bundle all assets, including images, first at compile time.

When binding :src="'../assets/' + icon.src" the app will try to find it relative to the url context of the browser, which depending on where you put your files and which server you use could be anywhere.

What you can do is importing the files using webpack, which will give you a base64 representation of the image and bind that to the source like so:

import Logo from '@/assets/logo.png'

export default {
  name: "App",
  data() {
    return {
      sources: [Logo]
    }
  }
};

and then bind it like this:

<img v-for="(source, index) in sources" :key="index" width="25%" :src="source">

I've made an example, in case that helps. Caveat: this is probably not a very good solution for large file sizes.

Collectives™ on Stack Overflow

VueJs - loading dynamic images

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related