0

我有一个问题，无法在 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()
4

1 回答 1

0

将您的 img 导入语句更改为以下内容。

import img from '../image/images.jpg'
于 2020-09-04T03:17:31.043 回答