[Vuejs]-Dynamic img src with concatenation into vue.js

by

0👍

I think the problem is not the code but probably where you are pointing the url to, are you sure is the correct path.

you can also use some computed property to change the whole url something like this:
https://jsfiddle.net/56zw74cp/3/

computed: { image_url: function() { return this.imagePreUrl + this.objectPublicSelected   };},

0👍

Short answer: you cannot display images with relative file system path dynamically generated.

To understand why it’s helpful to understand why your first example works:

  • when having an image with a static src it will get translated. The translation is handled by webpack (or any other module loader you are using) and not by vue.js itself.
  • webpack decides what happens with that src, it may get translated to another path (what happens in your case) or even embedded the entire image in the src attribute

When you are using vue’s binding the final src is generated at runtime, webpack is not running anymore so there’s no one that takes care of transforming the attribute. You end up with whatever you’re passing to that attribute.

You can use a relative path, but that path needs to be relative to the URL currently accessed. Relative file system path will not work as you’re not running on the server’s file system, but obeying URL rules.

Any absolute URL path will obviously work (as long as the path leads to a valid image resource).

Note: because of the way webpack (or other module loaders) works the final path of an image resource is not easy to figure out. For instance: if you have cache busting strategies the final path is totally different from the one that you have on your server’s file system.

Leave a comment