인프런 커뮤니티 질문&답변

Image 컴포넌트에 css 모듈 방식으로 width와 height 값을 설정하면 width, height 속성을 빼도 되는 줄 알았는데 빼보니까 width 속성이 필요하다고 에러가 나네요.

Image 컴포넌트는 무조건 크기를 지정해서 사용해야하나봅니다.

.item {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 12px;
}

.img {
  width: 300px;
  height: 250px;
}

import axios from 'axios';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import styles from './ProductList.module.css';

function ProductList() {
	const [products, setProducts] = useState();

	useEffect(() => {
		axios.get('http://localhost:4000/products').then(response => {
			setProducts(response.data);
		});
	}, []);

	return (
		<ul>
			{products &&
				products.map(product => (
					<li key={product.id} className={styles.item}>
						<div>
							<Image
								src={product.imageUrl}
								alt={product.name}
								className={styles.img}
							/>
						</div>
						<div>{product.name}</div>
					</li>
				))}
		</ul>
	);
}

export default ProductList;