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

【问题标题】：Why cannot import image file in nextjs?为什么不能在 nextjs 中导入图像文件？
【发布时间】：2020-12-23 07:13:09
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs import next.js next-images

【解决方案1】：

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

import img from '../image/images.jpg'

【讨论】：

对不起，你的回答不适合我
但是，我通过添加“公共文件夹”解决了这个问题，并放入了图像文件。然后解决了。