[Vuejs]-How to properly format an image url in a Vue.js single-file-component?

by

0👍

I’m not going to accept this as the answer, in case someone can offer something better, but after some tinkering I was able to solve my problem by using this:

<img :src="theimage" />

and adding a computed property like this:

computed: {
   theimage: function () {
      return '/Themes/MyOrchardTheme.Theme/Images/AnImage.png';
   }

This will bypass the Webpack transpiler (or vue-loader or whatever) check to make sure the resource can be located and has the added benefit that I can programmatically control the image displayed, which (although not mentioned) is ultimately what I wanted to do (code not shown). I was expecting to use v-if or v-show with multiple image tags, but using a computed property killed two birds with one stone.

Thanks to everyone who provided feedback. – I have a great deal to learn!

Leave a comment