web-dev-qa-db-fra.com

Je ne peux pas référencer une image dans next-js

J'ai un composant React qui est utilisé dans la prochaine page js:

/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

Dans Main.js, j'ai le code suivant

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

J'obtiens l'erreur suivante

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)

J'ai essayé de faire ce qui suit

Dans next-config.js

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

J'obtiens toujours la même erreur.

Qu'est-ce que je fais mal?

javascriptreactjsnext.js
3
Pota Onasys

Au moins dans notre projet, nous utilisons require pour les images au lieu d'importer. Notre prochaine configuration ressemble à la vôtre.

Essayez ce qui suit et voyez si cela vous aide:

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

Vous pouvez ensuite utiliser votre image comme src comme ceci:

<img src={macbookIphone}/>
1
olpe