반응형 image3 [NextJS] Image background 설정하기 일반적으로 웹에서는 img tag 혹은 css의 background-image 속성을 사용하여서 배경 이미지를 설정한다. 그러나 Next JS에서는 자체적으로 최적화를 해주는 Image tag가 있다. 따라서 이 태그를 사용해 배경으로 설정해보겠다. import Image from "next/image"; export default function Page() { return ( content ) } Image tag에서는 width와 height를 설정할 수도 있지만 위처럼 layout을 fill로 설정하고 objectFit을 cover로 설정하면 자동으로 배경을 채워준다. objectPosition 속성은 사용하지 않을 수도 있지만 우선 center로 설정해준다. 이렇게 작성하기만 하면 이미지와 co.. 2022. 7. 2. [Flutter] Container 배경 이미지 넣기 flutter 에서 배경에 이미지를 넣는 방법은 크게 2가지가 있다. Stack을 사용해서 아래에 이미지를 넣을 수도 있고, Container에 decoration을 사용해서 이미지를 넣을 수도 있습니다. 이번 글에서는 decoration을 사용해서 이미지를 넣어보겠습니다. import 'package:flutter/material.dart'; class Page extends StatelessWidget { const Page({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( image: Decoration.. 2022. 1. 3. [React] react에서 local image file 불러오기 [문제점] react에서는 웹링크로 이미지 url을 한 경우에는 정상적으로 보이지만, 다음과 같이 일반적인 경로를 사용하여서 local에 저장되어있는 image를 불어오면 정상적으로 보이지 않는다. 이러한 문제를 해결하기 위한 방법으로는 총 3가지가 있다. 1. Public folder 사용하기 public 폴더 안에 이미지를 저장하는 img 폴더를 만든 뒤에 이미지들이 해당 폴더 안에 모두 저장한다. 그러면 절대경로를 사용하여서 이미지를 불러올 수 있다. 2. import 사용하기 import imgfile from './imgfile.png'; 첫번째는 import를 하여서 이미지를 불러오는 방법이다. 3. require 사용하기 두번째는 require을 사용하는 방법으로 import와 같이 src폴.. 2021. 6. 30. 이전 1 다음 반응형
