내정보 보기
Q&A 영역
질문
홈페이지 개인 이미지 업로드
Garibaldi
조회수 140
작성일2024.07.16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>갤러리</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
padding: 20px;
color: #fff;
}
.content {
padding: 20px;
}
img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>갤러리</h1>
</div>
<div class="content">
<h2>우리 반 단체 사진</h2>
<img src="https://postfiles.pstatic.net/MjAyNDA3MTZfMTA1/MDAxNzIxMDU3NTA4Njg0..JPEG/IMG_1002.jpeg?type=w966">
</div>
</body>
</html>
제가 홈페이지 제작을 하고 있는데여
개인 이미지를 공개 블로그에 올리고 그 이미지 링크를 복사해서 위 img src에 첨부를 했어요 제 컴퓨터에서는 작동을 하나 여전히 netlify에 디플로이를 할 경우 이미지가 뜨지 않아서 어떻게 해결해야 할 지 알려주세요 !!
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>갤러리</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
padding: 20px;
color: #fff;
}
.content {
padding: 20px;
}
img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>갤러리</h1>
</div>
<div class="content">
<h2>우리 반 단체 사진</h2>
<img src="https://postfiles.pstatic.net/MjAyNDA3MTZfMTA1/MDAxNzIxMDU3NTA4Njg0..JPEG/IMG_1002.jpeg?type=w966">
</div>
</body>
</html>
제가 홈페이지 제작을 하고 있는데여
개인 이미지를 공개 블로그에 올리고 그 이미지 링크를 복사해서 위 img src에 첨부를 했어요 제 컴퓨터에서는 작동을 하나 여전히 netlify에 디플로이를 할 경우 이미지가 뜨지 않아서 어떻게 해결해야 할 지 알려주세요 !!
답변자님,
정보를 공유해 주세요.
1번째 답변
되도록 홈페이지를 업로드 할 때 상대경로로 이미지를 지정한 다음, 폴더째로 업로드 하는 전략을 사용해 보세요.
업로드할 폴더의 경우
폴더이름
ㄴ html 파일들
ㄴ static
ㄴ js 폴더
ㄴ css 폴더
ㄴ img 폴더
이렇게 구성하곤 합니다.
이렇게하는 이유는, 다른 웹페이지의 이미지를 불러오면 CORS라는 것에 걸리거나, 다른 웹페이지가 접근을 차단하여 이미지가 깨지는 경우가 있기 때문입니다.
2024.07.16.
-
채택
질문자가 채택한 답변입니다.
내 소식이 없습니다.
최근 공지사항이 없습니다.
