favicon 경로 질문
1700
작성한 질문수 12
안녕하세요! 강의 잘 듣고 있습니다 :)
강의를 진행하며 궁금한 부분이 생겨 질문 남깁니다.
강의를 진행하던 중 favicon 경로 설정을 잘했다고 생각하였는데, favicon 경로를 찾지 못하는 현상이 나타났습니다.
저의 프로젝트 구조와 코드는 아래와 같았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 페이지 반응형 설정 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="../src/assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="../src/assets/favicon.ico" type="image/x-icon">
<!-- awosome icon CDN -->
<script src="https://kit.fontawesome.com/8bfe0c4184.js" crossorigin="anonymous"></script>
<!-- 페이지 글꼴 설정 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
하지만 코드 작성후 cmd + 클릭하여 해당 파일이 잘 연결된 것을 확인하였으나, 아래와 같이 이미지 경로를 찾지 못하였습니다.
이후 다음과 같이 파비콘 파일의 위치를 변경한 후 경로 코드를 재작성한 결과 정상적으로 수행되는 것을 확인할 수 있었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 페이지 반응형 설정 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- awosome icon CDN -->
<script src="https://kit.fontawesome.com/8bfe0c4184.js" crossorigin="anonymous"></script>
<!-- 페이지 글꼴 설정 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
혹시 경로를 정상적으로 지정하였음에도, 이러한 현상이 나타나는지 알려주실 수 있으실까요?
답변 1
1
안녕하세요 dev님, 좋은 질문이네요. 웹팩 빌드를 거치지 않는 파일들은 public 폴더 밑에 있어야 배포될 때 최종 파일 경로에 파일이 복사됩니다. public 밑에 assets 폴더 옮기시고 아래 경로로 잡아주시면 될 것 같아요 :)
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
Chrome 개발자 모드 확장이 안됨
0
302
1
깃 권한 요청드립니다
0
128
1
vue.js 중급 리포지토리 권한 관련
0
130
1
vuex + axios 질문 있습니다!
1
210
2
깃 권한 요청드립니다!
0
168
1
강의 깃주소 문의
0
151
1
router-view에 props를 어떻게 넘길 수 있나요?
1
292
2
Vue가 인식되지 않는 현상
0
213
1
기초강좌는 어디있나요?
1
200
2
App.vue가 필요한 이유
0
199
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
264
1
뷰 라이프사이클
1
194
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
379
3
로컬 스토리지는 어디에 있나요?
1
290
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
403
2
export default 관련한 질문
0
369
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
363
2
깃허브에 문제있는것 같습니다.
1
283
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
314
2
addTodo Helper 함수 적용
1
252
1
vuex 헬퍼 전역 설정
1
254
2
github 권한요청드립니다.
1
262
2
이벤트 위치에 대한 궁금증 입니다.
1
229
2
구조 차이에 대한 문의
1
351
2