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

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

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

자산: 프로젝트 중에 webpack에 의해 처리되고 구문 분석됩니다. 컴파일 프로세스 모듈 종속성의 경우 < img src="./logo.png"> 및 <code><a href="http://www.%20php.cn/wiki/892.html" target="_blank">Background<code> img src=”./logo.png”>和<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.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]
　根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件

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

代码实例

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//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 중국어 웹사이트의 기타 관련 기사를 참조하세요!