Vue.js - 使用 v-for 动态创建图像不起作用； src 未找到答案

【问题标题】：Vue.js - Using v-for to dynamically create images not working; src not foundVue.js - 使用 v-for 动态创建图像不起作用； src 未找到
【发布时间】：2019-04-14 17:56:06
【问题描述】：

所以我有非常可预测的命名图像，并希望将所有图像自动导入 Vue 以显示在网页上。使用 Vue CLI 时，让程序查看资产文件夹中任何图像的唯一方法是硬编码图像名称；动态生成图像名称（如通过字符串连接和使用 v-for）不起作用。在我的代码模板中，您将看到 7 个“Face”组件，其中 5 个被注释并且不起作用。只有 2 个未注释的硬编码图像定义有效，即使它们看起来都一样！知道如何解决这个问题吗？

<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>

对于那些要求 Face 组件代码的人（现在它的设计尽可能简单，因为我才刚刚开始做这一切）：

<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>

【问题讨论】：

请提供Face的相关代码
@BoussadjraBrahim 如果可行，则不需要Face
我认为图像数组是空的
不，不是。使用图像数组时，我收到以下类型的错误：[Vue 警告]：渲染错误：“错误：找不到模块 './assets/test0.png'” div 上的 v-for 指令可以正常工作图像数组，所以我上面的代码显示了 4 个相同的图像。
@user3225632 你试过<Face :src="require('./assets/test' + image.id + '.png')"/>

标签： javascript vue.js

【解决方案1】：

我能够通过导入目录中的所有图像，使用改编自 here，如下图：

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)$/));

但是，如果将“./assets/”替换为变量，我发现 importAll 语句会完全崩溃，这很奇怪，如下例所示：

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

这种奇怪的行为显然只是 something you have to work around 在处理 Webpack 时。

【讨论】：