웹 프론트엔드 JS 튜토리얼 vue:src 파일 경로 오류 문제를 처리하는 방법

vue:src 파일 경로 오류 문제를 처리하는 방법

May 21, 2018 pm 01:59 PM
어떻게 실수 질문

이번에는 vue:src 파일 경로 오류 문제를 처리하는 방법을 알려드리겠습니다. vue:src 파일 경로 오류 문제를 처리할 때 주의 사항은 무엇인가요?

먼저 vue-cli 자산과 static 두 파일의 차이점을 설명하겠습니다. 이는 다음 솔루션을 이해하는 데 도움이 될 것이기 때문입니다.

자산: 프로젝트 중에 webpack에 의해 처리되고 구문 분석됩니다. 컴파일 프로세스 모듈 종속성의 경우 < img src="./logo.png"&gt; 및 <code><a href="http://www.%20php.cn/wiki/892.html" target="_blank">Background<code> img src=”./logo.png”&gt;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖
 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublicbuild.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]
 根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件

问题来了,用js动态加载assets或者本文件的图片出现404的状态码

代码实例

&lt;li v-for=&quot;(item,index) in images&quot; :key=&quot;index&quot;&gt;
&lt;img :src=&quot;item.src&quot;&gt;&lt;/li&gt;
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./2.png}]
 }
}
로그인 후 복사

跑起来发现图片不显示,错误码为404,

 原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png,完整地址为localhost:8080/static/img/[filename].png

 解决办法:

  ①将图片作为模块加载进去,比如images:[{src:<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>(‘./1.png')},{src:require(‘./2.png')}]这样webpack就能将其解析。

  ②将图片放到static目录下,但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来,当然你也可以通过在webpack.base.config.js:url(./logo.png), "./logo.png"는 상대 리소스 경로이며 다음으로 해결됩니다. 모듈 종속성으로서의 webpack

정적: 이 디렉토리의 파일은 webpack에서 처리되지 않습니다. 간단히 말해서 타사 파일이 저장된 위치가 webpack에서 구문 분석되지 않는다는 의미입니다. 최종 패키징 디렉터리에 직접 복사됩니다(기본값은 dist/static). 이러한 파일은 config.js 파일의 build를 통해 수행되는 절대 경로 <a href="http://www.php.cn/wiki/231.html" target="_blank">를 사용하여 참조되어야 합니다. . 자산Public</a>build.assertsSubDirectory 링크에 의해 결정됩니다. static/에 있는 모든 파일은 절대 경로인 /static[파일 이름] 형식으로 참조되어야 합니다.

웹팩의 특성에 따라 일반적으로 정적 파일은 변경되지 않으며 세 번째 파일인 Assert가 변경될 수 있습니다. .File

여기서 문제는 js를 사용하여 이 파일의 자산이나 사진을 로드할 때

코드 예시rrreee

실행해 보니 이미지가 표시되지 않고 오류가 뜹니다 코드는 404였습니다.

이유: webpack에서는 사진이 모듈로 사용됩니다. 사진은 동적으로 로드되기 때문에 url-loader는 이미지 주소를 구문 분석할 수 없습니다. 그러면 npm run dev 또는 npm run build가 수행됩니다. 경로는 처리되지 않습니다. [webpack에 의해 구문 분석된 경로는 /static/img/[filename].png로 구문 분석되며, 전체 주소는 localhost:8080/static/img/[filename]입니다. ].png]

해결책:

 ①이미지를 이미지와 같은 모듈로 로드합니다. [{src:<a href="http://www.php%20.cn/wiki/136.html" target="_blank">require</a>

('./1.png')},{src:require(' ./2.png')}]이 방법으로 webpack이 이를 구문 분석할 수 있습니다.

 ②이미지를 정적 디렉터리에 넣되 images:[{src:”/static/1.png”},{src:”/static/2.png”}와 같이 절대 경로를 작성해야 합니다. ]이렇게 하면 이미지도 표시됩니다. 물론 <code>webpack.base.config.js에 정의하여 경로 작성 길이를 단축할 수도 있습니다.

물론 로컬 이미지가 너무 많으면 이렇게 작성하는 것이 번거롭다고 하셨죠. 그런데 사실 저희는 이렇게 작업을 단순화합니다.

1단계: static에서 새 json 폴더 만들기


2부: 그림과 같이 json 파일을 입력합니다.


3부: 해당 vue 파일에 json을 추가하고 구문 분석합니다. 참고

🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명🎜🎜🎜🎜🎜vue addRoutes 동적 권한 라우팅 메뉴 구현 단계에 대한 자세한 설명🎜🎜🎜

위 내용은 vue:src 파일 경로 오류 문제를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

작업을 완료할 수 없습니다(오류 0x0000771). 프린터 오류 작업을 완료할 수 없습니다(오류 0x0000771). 프린터 오류 Mar 16, 2024 pm 03:50 PM

작업을 완료할 수 없습니다(오류 0x0000771). 프린터 오류

HTTP 상태 코드 460의 원인 공개 HTTP 상태 코드 460의 원인 공개 Feb 19, 2024 pm 08:30 PM

HTTP 상태 코드 460의 원인 공개

Windows Sandbox를 시작하지 못했습니다. - 액세스가 거부되었습니다. Windows Sandbox를 시작하지 못했습니다. - 액세스가 거부되었습니다. Feb 19, 2024 pm 01:00 PM

Windows Sandbox를 시작하지 못했습니다. - 액세스가 거부되었습니다.

Windows 업데이트 프롬프트 오류 0x8024401c 오류에 대한 해결 방법 Windows 업데이트 프롬프트 오류 0x8024401c 오류에 대한 해결 방법 Jun 08, 2024 pm 12:18 PM

Windows 업데이트 프롬프트 오류 0x8024401c 오류에 대한 해결 방법

새 가상 머신을 생성하는 동안 서버에서 0x80070003 오류가 발생했습니다. 새 가상 머신을 생성하는 동안 서버에서 0x80070003 오류가 발생했습니다. Feb 19, 2024 pm 02:30 PM

새 가상 머신을 생성하는 동안 서버에서 0x80070003 오류가 발생했습니다.

코드 0xc000007b 오류 해결 코드 0xc000007b 오류 해결 Feb 18, 2024 pm 07:34 PM

코드 0xc000007b 오류 해결

파이오니어 오류 코드 수정 Kadena-Keesler 파이오니어 오류 코드 수정 Kadena-Keesler Feb 19, 2024 pm 02:20 PM

파이오니어 오류 코드 수정 Kadena-Keesler

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 Feb 20, 2024 am 10:07 AM

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법

See all articles