为什么不能在nextjs中导入图像文件？

Question

i have a problem that cannot import image file in nextjs我有一个问题，无法在 nextjs 中导入图像文件

Why don understand cannot import image file...不明白为什么不能导入图片文件...

i have a image file in 'image/images.jpg'我在“image/images.jpg”中有一个图像文件

In chrome browser, there are no error message about image,在chrome浏览器中，没有关于图像的错误信息，

and, 'Elements' tab, image size '0 x 0'.以及“元素”选项卡，图像大小为“0 x 0”。

so, i have gave image tag to 'style={{width:'100px', height:'100px'}}' but, i cannot this problem.所以，我已经给了图像标签 'style={{width:'100px', height:'100px'}}' 但是，我不能解决这个问题。

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'

为什么不能在nextjs中导入图像文件？

问题描述

1 个解决方案

解决方案1
0 2020-09-04 03:17:31

为什么不能在nextjs中导入图像文件？

问题描述

1 个解决方案

解决方案1 0 2020-09-04 03:17:31

解决方案1
0 2020-09-04 03:17:31