html 외부 이미지 적용 관련해서 질문 하나 드립니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

html 외부 이미지 적용 관련해서 질문 하나 드립니다.

undefined주차

고*수

・

추천

・

조회수

답변 완료

코드는 똑같은데 첨부 이미지와 같이 하나는 이미지를 불러오지 못하는데 다른 하나는 잘 나옵니다.

어떤 부분 때문에 이런게 발생하는 걸까요..?

flask 서버 연결한 html은 주소창 보니까 localhost로 접근(?) 한 페이지는 이미지가 나오지 않고,

디렉토리에서 오픈된 html파일은 이미지를 잘 불러오는 것 같은데.. 해결 어떻게 하나요?

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>BIBI fan-page</title>
    <link href="https://fonts.googleapis.com/css2?family=Square+Peg&display=swap" rel="stylesheet">
    <style>
        .mytitle {

            width: 100%;
            height: 300px;

            color: white;


            background-image: url('https://cafeptthumb-phinf.pstatic.net/MjAyMTAyMjJfNjIg/MDAxNjEzOTU5OTMxNDYy.zfjaBiQ8vgLWgTVC6Y6TgXCVsfvisUk03QVKHDcksjkg.8IqCkzq5u9ahqv1y-RIXLH0qc6Sh84lY0mAkR98h20sg.JPEG/project%EF%BC%BFfeeliv%EF%BC%BF20210222%EF%BC%BF1.jpg?type=w1600');
            background-size: cover;
            background-position: center 20%;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        .mytitle > h1 {
            font-size: 8em;

            height: 130px;

            margin-top: 50px;

            font-family: 'Square Peg', cursive;

        }

        .mytitle > div {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 00px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mybtn > button {
            margin-top: 15px;
        }

        .cards {
            margin-top: 20px;
        }

        .card {
            max-width: 500px;
            width: 95%;

            margin: 10px auto 5px auto;

            box-shadow: 0px 0px 3px 0px black;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let msg = response.temp;

                    $('#temp').text(msg);
                }
            })
            uploading()
        });

        function uploading() {
            $.ajax({
                type: "GET",
                url: "/fanpage",
                data: {},
                success: function (response) {
                    let comments_list = response.comments;

                    for (let i=0; i<comments_list.length; ++i){
                        let nickname = comments_list[i]['nickname']
                        let comment = comments_list[i]['comment']

                        let temp_html = `
                                <div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${nickname}</footer>
                                        </blockquote>
                                    </div>
                                </div>
                            `

                        $('#supportingComments').append(temp_html);
                    }


                    alert(response['msg'])
                }
            })
        }

        function save_posting() {
            let nickname = $('#floatingInput').val()
            let comment =  $('#floatingTextarea').val()

            $.ajax({
                    type: "POST",
                    url: "/fanpage",
                    data: {nickname_give: nickname, comment_give: comment},
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload()
                    }
                })
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>BIBI</h1>
    <div>현재 기온: <span id="temp">00.0</span>도</div>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
        <label for="floatingTextarea">응원댓글</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark" onclick="save_posting()">응원남기기</button>
    </div>

</div>
<div class="cards" id="supportingComments">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>You are doing a good job.</p>
                <footer class="blockquote-footer">one of big fans</footer>
            </blockquote>
        </div>
    </div>
</div>
</body>
</html>

댓글 알림