Vue.js - Using v-for to dynamically create images not working; src not found

Question

So I have very predictably named images, and would like to import all of them into Vue automatically for display on a web page. While using the Vue CLI, the only way I can get the program to see any images in my assets folder is if I hard code the image names; generating image names dynamically, as by string concatenation and using v-for, does not work. In my code template you'll see 7 "Face" components, 5 of which are commented and do not work. Only the 2 un-commented, hard-coded image definitions work, even though they all seem equivalent! Any idea how I can fix this issue?

<template>
  <div id="app">
    <Face :src="src" />
    <div v-for="image in images" :key="image.id">
      <!-- <Face :src="image.src"/> -->
      <!-- <Face :src="getImage(image.src)"/> -->
      <!-- <Face :src="require(image.src)"/> -->
      <!-- <Face :src="`require('./assets/test${image.id}.png')`"/> -->
      <Face :src="require('./assets/test0.png')"/>
    </div>
    <!-- <Face v-for="image in images" :key="image.id" :src="require(image.src)"/> -->
  </div>
</template>

<script>
const _ = require('lodash');
import Face from './components/Face.vue'

const imageDir = "./assets/";
const images = [];
// Generate image names
for (let i of _.range(3)) {
  let imageName = `${imageDir}test${i}.png`;  
  images.push({id: i, src: imageName});
  console.log(images);
}

export default {
  name: 'app',
  data() {
    return {
      src: require("./assets/test0.png"),
      images: images,
    }
  },
  methods: {
    getImage(url) {
      return require(url);
    },
  },
  components: {
    Face
  }
}
</script>

And for those asking for the Face component code (it's designed to be as simple as possible for now, since I'm just getting started with all this):

<template>
  <div class="centered">
    <img :src="src">
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },

  data() {
    return {
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.centered {
  margin: 0 auto;
}
</style>

No, it isn't. When using the images array, I get the following type of error: [Vue warn]: Error in render: "Error: Cannot find module './assets/test0.png'" The v-for directive on the div works fine with the image array, so the code that I have above shows 4 of the same image. — user3225632, Nov 12 '18 at 01:49
@user3225632 i think yoy should pass this relative path `../assets/test0.png` as string — Boussadjra Brahim, Nov 12 '18 at 02:04
@BoussadjraBrahim `` already works for OP, like they said in the post — Derek Pollard, Nov 12 '18 at 02:07
@DerekPollard I get the same error as before with your suggestion of `` . — user3225632, Nov 12 '18 at 03:18
@BoussadjraBrahim Passing a hard-coded string like that works fine, but only if used with `require()`, as I mentioned earlier. Passing the string in raw does not work. — user3225632, Nov 12 '18 at 03:22

user3225632 · Answer 1 · 2018-11-12T04:06:11.643

I was able to circumvent the problem somewhat by importing all the images in my directory, using code adapted from here, shown below:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./assets/', false, /\.(jpg)$/));

However, I found it odd that the importAll statement completely breaks down if you replace ‘./assets/’ with a variable, as in the following case:

const imageDir = './assets/'
const images = importAll(require.context(imageDir, false, /\.(jpg)$/));

This odd behavior is apparently just something you have to work around when dealing with Webpack.

Vue.js - Using v-for to dynamically create images not working; src not found

1 Answers1