Javascript 将文件内容读入vue组件内的数组

在我的media.txt文件中，我有：

"https://www.dropbox.com/s/******/687.jpg?dl=0",
"https://www.dropbox.com/s/******/0688.jpg?dl=0

我有以下Vue转盘组件：

<template>
  <section>
    <v-card
        class="mx-auto"
        color="#26c6da"
        dark
        max-width="1200"
      >

      <v-carousel>
        <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
      </v-carousel>

    </v-card>
  </section>
</template>

<script>
var cache = {};
// const images = require.context('../static/', false, /\.png$|\.jpg/);
// const images = require.context('../static/', false, /\.png$|\.jpg|\.mp4/); // WORKING
const images = require.context('../static/media.txt', false, /\.png$|\.jpg|\.mp4/);
var imagesArray = Array.from(images.keys());
// const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
console.log(images.keys());
console.log('images');
console.log(images);
var constructed = [];
function constructItems(fileNames, constructed) {
  fileNames.forEach(fileName => {
    constructed.push({
      'src': fileName.substr(1)
    })
  });
  return constructed;
}
console.log('items ');
console.log(imagesArray);
// At build-time cache will be populated with all required modules. 
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
  data: function() {
    return {
      items: res
    };
  }
};
</script>

我想将media.txt文件中的图像读取到一个数组中，然后用这些图像填充carousel src。我一直在尝试Webpack的require.context函数，但我发现一个模块未找到错误

---

如何才能使其正常工作？

您可能应该安装一个用于webpack read txt文件的加载程序，在vue.config.js中进行配置，并且您应该能够像这样导入：从“原始加载程序”导入txt/txt'文件；改为使用require。

您可能应该为webpack read txt文件安装一个加载程序，在vue.config.js中配置它，并且您应该能够像这样导入：从“原始加载程序”导入txt/txt'文件；改为使用require。

看起来您正在尝试将字符串数组JSON导入变量。该字符串数组应由方括号分隔，如下所示：

[ 福， 酒吧 ] 不是此处要使用的适当API，因为该方法从指定目录导入多个文件。例如，下面的代码告诉Webpack从名为../static/media.txt的目录加载*.png、*.jpg和*.mp4文件，该目录可能实际上是一个文件

require.context“../static/media.txt”，false，/\.png$\.jpg\.mp4///不要这样做 相反，您可以简单地使用require'path/to/file.json'将指定的文件作为json对象/数组导入。例如，要导入包含顶部提到的数组的src/assets/media.json，语法如下：

//例如，在src/components/Foo.vue中 const media=require'../assets/media.json' console.logmedia/=>[foo，bar]

---

看起来您正在尝试将字符串数组JSON导入变量。该字符串数组应由方括号分隔，如下所示：

[ 福， 酒吧 ] 不是此处要使用的适当API，因为该方法从指定目录导入多个文件。例如，下面的代码告诉Webpack从名为../static/media.txt的目录加载*.png、*.jpg和*.mp4文件，该目录可能实际上是一个文件

require.context“../static/media.txt”，false，/\.png$\.jpg\.mp4///不要这样做 相反，您可以简单地使用require'path/to/file.json'将指定的文件作为json对象/数组导入。例如，要导入包含顶部提到的数组的src/assets/media.json，语法如下：

//例如，在src/components/Foo.vue中 const media=require'../assets/media.json' console.logmedia/=>[foo，bar]