Why cannot import image file in nextjs?

Question

i have a problem that cannot import image file in nextjs

Why don understand cannot import image file...

i have a image file in 'image/images.jpg'

In chrome browser, there are no error message about image,

and, 'Elements' tab, image size '0 x 0'.

so, i have gave image tag to 'style={{width:'100px', height:'100px'}}' but, i cannot this problem.

below the code.

pages/index.js
import * as React from "react";
import Head from "next/head";
import AppLayout from "../components/AppLayout";
import {img} from '../image/images.jpg'


const Home = () => {
  return (
    <>
      <Head>
        <title>Finder</title>
      </Head>
      <AppLayout>
        <div>Home test</div>
        <image src={img} style={{width:'100px', height:'100px'}} />
      </AppLayout>

    </>

  );
};

export default Home;

components/Applayout.js

import React from 'react';

import {Menu,Input, Row, Col} from 'antd';
import Link from 'next/link'
import styled from 'styled-components';

const DivStd = styled.div`
  display: flex;
  justify-content: flex-end;
`

const MenuStd = styled(Menu)`
`

const MenuStdChildren = styled(Menu)`
  justify-content: flex-end;
`

const AppLayout = ({children}) => {
  return (
    <>
      <DivStd>

        <MenuStd mode='horizontal'>

          <MenuStdChildren.Item>
            <Link href='/'><a>Home</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/signin'><a>sign in</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/signup'><a>sign up</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/mobxtest'><a>mobxtest</a></Link>
          </MenuStdChildren.Item>

        </MenuStd>

      </DivStd>


      <Row gutter={8}>

        <Col xs={24} md={2} />
        <Col xs={24} md={16}>{children}</Col>
        <Col xs={24} md={6} />

      </Row>

    </>
  )
}

export default AppLayout;

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

Answer 1

将您的 img 导入语句更改为下面..

import img from '../image/images.jpg'

Why cannot import image file in nextjs?

Question

1 answers

solution1
0 2020-09-04 03:17:31

Why cannot import image file in nextjs?

Question

1 answers

solution1 0 2020-09-04 03:17:31

solution1
0 2020-09-04 03:17:31