如何使Javascript识别我的文件路径

Question

我正在与React一起工作，并试图为位于TESTDATA文件夹中的每个轨道渲染一个新的音频元素。但是，当我尝试执行此操作时，似乎无法识别我的歌曲文件路径。这很奇怪，因为如果我使用与我的TESTDATA使用相同确切路径的import bruh，它会按预期工作。我确实注意到，当我console.log(bruh)给我/static/media/1.fe427df7.mp3时，但当我console.log(TESTDATA)给我["./Songs/1.mp3"]。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import TESTDATA from "./components/object.json";
import ReactAudioPlayer from "react-audio-player";
import useSimpleAudio from "use-simple-audio";
import bruh from './Songs/1.mp3';
import { Howl, Howler } from "howler";
import ReactHowler from "react-howler";

const App = () => {
  const [sound, setSound] = useState(false);

  let click = e => {
    setSound(!sound);
  };
 console.log(TESTDATA.map((e) => e))
console.log(bruh)


let check = TESTDATA.map((e) => <ReactAudioPlayer src={e} autoplay={false} controls />)

  return (
    <div>
      {check}
    </div>
  );
};

export default App;

Answer 1

运行构建时，它会将您的歌曲放入构建文件夹吗？如果没有，则需要将歌曲放入公用文件夹中，以便可以找到它们。

或

将所有歌曲导入数组

import one from 'song1.mp3'
import two from 'song2.mp3

const songArr = [one,two]