Dynamic images not working in Vue.js

Answers • 2 Asked • Jun 13 2019
I have a case where in my Vue.js with webpack web app, I need to display dynamic images. I want to show img where file name of images are stored in a variable. That variable is a computedproperty which is returning a Vuex store variable, which is being populated asynchronously on beforeMount.
<div class="col-lg-2" v-for="pic in pics"> <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic"> </div>

However it works perfectly when I just do:
<img src="../assets/dog.png" alt="dog">

My case is similar to this fiddle, but here it works with img URL, but in mine with actual file paths, it does not work.
What should be correct way to do it?

Write your answer...

On a mission to build Next-Gen Community Platform for Developers