Question

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

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

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

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

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

1 个答案: