web-dev-qa-db-ja.com

next-jsで画像を参照できない

次のjsページで使用されているReactコンポーネントがあります：

/pages/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from "../src/hoc/Layout/Layout";
import Main from "../src/components/Main/Main";

const Index = () => (
   <Layout>
       <Main />
   </Layout>
);
export default Index

Main.jsには次のコードがあります

import macbookIphone from '../../assets/images/mac-iphone.jpg';

次のエラーが表示されます

Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

私は次のことをやってみました

Next-config.js内

const withImages = require('next-images')
module.exports = withImages()

まだ同じエラーが発生します。

何が悪いのですか？

javascriptreactjsnext.js
3
Pota Onasys

少なくとも私たちのプロジェクトでは、インポートの代わりにrequire for imagesを使用しています。次の構成はあなたの構成に似ています。

以下を試して、それが役立つかどうかを確認してください。

const macbookIphone = require('../../assets/images/mac-iphone.jpg');

その後、次のように画像をsrcとして使用できます。

<img src={macbookIphone}/>
1
olpe