image

[JS] 이미지 src 변경하는 방법

자바스크립트에서 이미지의 src를 바꾸는 방법을 소개하겠습니다. 위와 같은 예시 html에서 이미지에 접근하는 간단한 방법은 querySelector 메서드를 이용하는 것입니다. // JavaScript $img = document.querySelector(".imgbox > img"); $img.src = `change.png`; 해당 메서드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꾸는 방법은 아래와 같습니다. Jquery를 사용하면 아래와 같은 한 줄로 끝낼 수 있습니다. $(`.imgBox > img`).attr({ src: "change.png" });

[Next.js] 이미지 로딩 애니메이션 구현하기

이미지를 리스트 형식으로 나열 할때, next.js 의 Image 컴포넌트를 사용하면 이미지를 캐싱 하게됩니다. 문제는 로드와 캐싱되는 시간 동안 사용자는 이미지 대신 비어 있는 공간을 보게됩니다. 해당 상황을 방지하기 위해서 로드되는 동안 로딩이 되고 있다는 애니메이션이 보이는 기능을 구현해보겠습니다. 코드 import Image from "next/image"; import { useRef } from "react"; export default const Poster = () => { const ref = useRef(null); return ( ref.current.remove()} /> ); } 일단 임시로 Poster 라는 컴포넌트를 하나 만들어 주고, 해당 컴포넌트에는 이미지와 로딩 애니메이션..

[HTML] SVG안에 이미지 넣기

SVG 안에 이미지 넣기 흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 태그를 사용할 수 없습니다. SVG 태그 안에 이미지를 넣는 방법은 태그를 사용하는 것입니다. 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다. 사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다. x : 이미지의 x축 좌표 위치 지정 y : 이미지의 y축 좌표 위치 지정 width : 이미지의 너비 height : 이미지의 높이 href : 이미지 파일의 URL을 가리킵니다. PreservAspectRatio : 이미지의 크기 배율 조정. 코드 태그에서는 src 속..