Есть ли способ импортировать изображение в мой проект materialui-nextjs?

Я импортировал изображение вот так:

import img from '../public/buildingspattern.png'

затем использовал его в компоненте:

    <Card className={classes.root}>
      <CardMedia
        className={classes.media}
        image={img}
        title="Buildings"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Something
        </Typography>
      </CardContent>
    </Card>

затем я починил свой next.config.js

const webpack = require('webpack');

module.exports = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    })

    return config
  },
};

Думаю, я что-то здесь пропустил. Приложение запускается нормально, но изображения нет.

Это то, что я вижу на веб-странице после того, как yarn dev

<div class="MuiCardMedia-root 
    makeStyles-media-16" 
    style="background- 
       image:url("8a955c62dc9b08f560cb800b273932ac.png")" 
    title="Buidings">
</div>

material-ui next.js
person azzmi    schedule 21.01.2021    source источник
comment
попробуйте src prop или установите высоту на CardMedia   -  person 王仁宏    schedule 21.01.2021

Ответы (3)


arrow_upward
2
arrow_downward

Я наткнулся на другой способ, который только что реализовал сегодня. Он проще и эффективнее,

  • Перейдите к компоненту Card в MaterialUi
  • Замените стандартный тег <img/> тегом <Image />
  • Также добавьте import Image from 'next/image'
person Hrithik Tiwari    schedule 22.01.2021

arrow_upward
1
arrow_downward

Предположим, вы создали компонент для возврата изображения

import Image from 'next/image';


function ImageComponent() {
    return (
        <Image src="../public/someImage.png" alt="Buildings Pattern"/>
    );
};

И используйте этот компонент в атрибуте изображения, используя интерполяцию, как вы это делали выше.

image={ImageComponent}

✌

person Hrithik Tiwari    schedule 21.01.2021

arrow_upward
0
arrow_downward

Прежде всего, вы можете использовать абсолютный путь к изображению в next.js, например, этот /image-name. Если не работает, вы создадите каталог в общедоступном каталоге с именем static и поместите свое изображение в статический каталог, после чего вы сможете получить доступ /static/image name

person Muhammad Minhaj    schedule 21.01.2021