找不到模塊：無法解析 mp3 Import NextJs Javascript

Question

我想將音頻文件“intro.mp3”從 public/audio 導入我的 Introduction.js 文件。 但我得到這個錯誤

./components/Introduction.js:4:0
Module not found: Can't resolve '/audio/intro.mp3'
  2 | import { Button, Flex, Box, WrapItem } from "@chakra-ui/react";
  3 | import useSound from "use-sound";
> 4 | import Intro from "/audio/intro.mp3";
  5 | 
  6 | export default function Introduction() {
  7 |   const [play, { stop }] = useSound(Intro);

Import trace for requested module:
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

我正在用 react-app 嘗試相同的代碼，它工作正常，沒有錯誤，但是當在 NextJs 中它變成一個錯誤時，我沒有在我的 NextJs 項目中使用打字稿。

import React, { useRef } from "react";
import { Button, Flex, Box, WrapItem } from "@chakra-ui/react";
import useSound from "use-sound";
import Intro from "/audio/intro.mp3";

export default function Introduction() {
    const [play, { stop }] = useSound(Intro);

    return (
        <>
            <Flex>
                <Box>
                    <Button
                        variant="ghost"
                        p="4"
                        size="lg"
                        onMouseEnter={() => play()}
                        onMouseLeave={() => stop()}>
                        Welcome to Interactive Learning Application
                    </Button>
                </Box>
            </Flex>
        </>
    );
}

Answer 1

您的導入語句應該帶有絕對路徑。

更改導入mp3文件的代碼行

import Intro from "/audio/intro.mp3"; 

和

import Intro from "./audio/intro.mp3";