Question

我需要放入视图的图像数量未知。

资产/图片/
- image1.jpg
- image2.jpg
- ...

如何动态地将这些显示在视图中？

我尝试创建一个API GET端点，该端点返回要使用的视图的相对路径列表，但是图像不会加载，因为它请求http://localhost:8080/assets/images/image1.jpg#/home会再次加载我的应用程序，而不是图像。如何动态加载这些图像？谢谢。

<template>
  <div id="App">
    <img v-for="image in images" :src="image" alt="" />
  </div>
</template>

<script>
  import api from '../APIService';

  export default {
    name: 'App',
    data() {
      return {
        images: []
      }
    },
    async beforeMount() {
      var images = await api.getImages();
      images.forEach(el => {
        this.images.push(el);
      });
    }
  }
</script>

Answer 1

您能尝试这样的事情吗？

<img v-for="image in images" :src="GetImage(image)" alt="" />

然后有一个方法：

getImage(image) {
  let img = require('@/' + image)
  return img
}

如何在VueJS中创建未知数量的img元素？

1 个答案: