프로젝트 2 이미지 깨짐 현상
1179
1 asked
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다.
어떻게 해결해야하나요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>
Answer 1
0
안녕하세요.
답변이 늦었습니다.
이미지가 제대로 디스플레이되지 않으면, img의 src 경로 지정에 에러가 있기 때문입니다.
우선,
1. Assets 폴더에 images 폴더가 맞는지 확인해주세요. S가 있는지 없는지…
2. 이상이 없다면, /assets/images 앞에 슬래쉬를 없애 보세요. 즉, assets/images/파일이름 이렇게요.
해보시고 안되면 다시 문의주세요
services-col mx-2 my-3
0
62
2
단축키 질문
0
57
1
부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.
0
279
2
프로젝트3의 툴팁에서
1
333
2
프로젝트1 번의 Navigation 강의부에서 질문입니다.
0
363
1
게시판을 추가할 수 있는 방법이 있을까요?
0
721
1
프로젝트 1- Service Section 에서 app.js에서 syntaxError가 납니다.
0
287
1
자식에 position:absolute;를 쓰지 않고, 바로 top 설정이 가능한가요?
0
350
2
cdn.js를 실제 프로젝트에 써도 문제가되지 않나요!?
0
529
1
carousel 구현에서 사용된 아이디가 중복 사용 가능한가요?
0
361
1
kakao map이 mobile에서도 가능하게 하려면 어떻게 할까요?
0
307
1
-webkit- 접두어가 안붙습니다.
0
400
1
브레이크 포인트 관련 문의
0
258
1
a:hover {color }
2
455
4
Post Content -2 질문
0
204
1
아니 선생님 이게 뭡니까 프로젝트3 Blog CTA Modal 파트
0
324
2
hover
0
322
1
box 공부중 질문있습니다
0
333
3
뭐가 잘못 된지 모르겠습니다.
0
294
2
강의보고 따라하는데 안됩니다.
0
302
3
3:10 -> 3:16 코드 질문 있습니다^^
0
282
2
card와 card-body 의 차이점
0
677
2
px-md-3
0
377
2
a:hover
0
289
2