[英]Why cannot import image file in nextjs?
我有一个问题,无法在 nextjs 中导入图像文件
不明白为什么不能导入图片文件...
我在“image/images.jpg”中有一个图像文件
在chrome浏览器中,没有关于图像的错误信息,
以及“元素”选项卡,图像大小为“0 x 0”。
所以,我已经给了图像标签 'style={{width:'100px', height:'100px'}}' 但是,我不能解决这个问题。
在代码下方。
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()
将您的 img 导入语句更改为下面..
import img from '../image/images.jpg'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.