Vue 패키징 후 잘못된 정적 리소스 이미지 문제를 해결하는 방법

아래에서는 Vue 패키징 후 잘못된 정적 리소스 이미지 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 문제 설명

프로젝트 개발에서 npm run build를 통해 파일을 패키징하고 파일을 서버에 넣으면 일반적으로 이미지 오류 문제가 발생하며 콘솔에 특정 메시지가 표시됩니다. 이미지를 찾을 수 없습니다(404 오류). 이러한 그림은 src로 소개된 그림이거나 CSS에 정의된 배경 그림일 수 있습니다. 이미지를 표시할 수 있는지 여부는 정적 리소스 파일의 위치 및 가져온 경로와 직접적인 관련이 있습니다. 다음은 내 프로젝트 중 하나의 파일 저장 및 경로 작성 방법입니다!

2. 해결 방법 중 하나

정적 리소스의 정적 저장 위치는 src 디렉터리에 있습니다.

왜 src 디렉터리에 있는지 궁금하시죠? src와 같은 디렉터리에 배치할 수 없나요? 뭐, 처음에는 src와 같은 디렉토리에 넣었는데 특정 CSS 파일에 배경 이미지를 도입했더니 패키징하고 나서 이미지가 무효가 되더라구요

실습으로 증명됐네요. 쓰기가 잘못되었습니다. 이로 인해 패키지할 때 많은 오류(예: CSS 로더 오류)가 발생하고 프로젝트가 실행되지도 않습니다.

그래서 다음과 같은 작성 방법을 사용했습니다.

이 작성 방법도 허용되지 않습니다. 그 이유는 정적 리소스 파일 static이 src 디렉터리에 없고 Vue, src 디렉터리에 있기 때문입니다. 는 루트 디렉터리인 src. 디렉터리에 상대적이므로 위의 작성 방법을 사용하려면 src 디렉터리에 static을 넣어야 합니다. 위의 그림 1과 그림 2에 표시된 것처럼

참고: static/images/user.png는 /static/images/user.png로 쓸 수 없습니다. 그렇지 않으면 이미지가 여전히 유효하지 않습니다.

위는 파일 저장 위치와 CSS에 이미지를 도입하는 것에 대한 내용입니다. img 태그를 통해 이미지를 도입한다면 상대적으로 간단합니다. 절대 주소를 직접 적고, 정적 리소스의 위치를 ​​지정하면 됩니다. 폴더는 src에도 있을 수 있습니다. src와 동일한 레벨 아래에 배치할 수도 있지만, 위와 같은 상황을 피하려면 그냥 src 안에 넣으세요!

img에서는 이미지를 소개합니다.

위는 이미지 오류 문제를 해결하는 방법입니다. 물론 정적 리소스 디렉터리를 src와 동일한 디렉터리에 넣어야 하는 경우 해결 방법도 있습니다. 이미지 가져오기 방법(연습해본 적이 없음) 등을 통해 직접 시도해 볼 수 있습니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 로컬 정적 이미지 경로 구현(자세한 튜토리얼)

웹팩 구성에 따라 글꼴 아이콘이 표시되지 않는 문제에 대한 해결 방법(자세한 튜토리얼)

BootStrap 사용 React Experience 프레임워크의 사용자(자세한 튜토리얼)

위 내용은 Vue 패키징 후 잘못된 정적 리소스 이미지 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!