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()
Change your img import statement to below..