공개
컴파일 타임에 필요하지 않은 것
절대경로 사용가능(가져오기시 “./파일명”가져오기가능)
사용자가 웹 브라우저에서 볼 수 있는 정적 파일(이미지)을 포함합니다.
출처
개발하는 동안 구성 요소에 사용된 파일 배치
공개 파일 가져오기의 단점
webpack에서 처리하지 않고 생성된 소스
-> 파일이 가볍지 않습니다.
-> 파일 경로를 잘못 입력하면 컴파일 단계가 아닌 사용자가 액세스할 때 404 오류가 발생합니다.
const url =
process.env.NODE_ENV === 'development'
? `./${domain}/image/img`
: 'image/img';
// 보통 이렇게 처리하는 듯
가벼운 무게를 위해 src에 이미지 파일을 넣는 것도 맞을 것입니다!
평가 후 여러 가지를 시도했습니다.
먼저 가져오기로 이미지를 로드합니다.
호출되지 않은
인터넷 검색 후 시도한 것
1. ts 형식 때문에? -> 실패
declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
// images.d.ts
2. webpack에서 파일을 압축할 때 별도의 설정이 필요한가요? -> npm i 파일로더, 터치 webpack.config.js -> 실패
module.exports = {
module: {
rules: (
{
test: /\.(png|jpe?g|gif)$/i,
use: (
{
loader: 'file-loader',
},
),
},
),
},
};
공식 webpack.config.js 문서의 내용까지 삭제했는데 실패했습니다.
요구사항으로 로드
이상한 요구할 것입니다
레드라인 없이 한번 가져왔습니다;;;
경로를 확인한 후 라이브러리 페이지에 적용할 것 같아서 테스트할 경로만 입력했습니다.
이름도 변경되었습니다
이렇게
이전에 사용했던 공용 폴더의 이미지는 웹팩을 거치지 않고 바로 빌드 파일로 들어가므로 이름이 변경되지 않았습니다.
이제 사진 파일을 src에 넣고 이름을 바꿉니다…
공용 폴더에 이미지 폴더를 넣는 것과 비교
차이가 있다
그리고 불행하게도 Catbow 도서관은
IMG_만 입력한 경우
자동으로 1.jpg, 2.jpg…
설정하는 논리가 있습니다.
이름이 바뀐 파일 이후 1.jpg, 2.jpg …첨부
Catbow 라이브러리를 사용할 때 반드시 공개하세요…