[英]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.