이번에는 잘못된 경로가 있는 vue :src 파일을 처리하는 방법을 알려드리겠습니다. 잘못된 파일 경로가 있는 vue :src를 처리할 때 주의사항은 무엇인가요?
자산: 프로젝트 컴파일 프로세스 중에 웹팩에 의해 처리되고 모듈 종속성으로 구문 분석됩니다. < img src="./logo.png">와 같은 상대 경로 형식만 지원됩니다. 코드> 및 <a href="http://www.php.cn/wiki/892.html" target="_blank">배경<p style="text-align: left;">:url(./logo.png),” ./logo.png"는 webpack에 의해 모듈 종속성으로 구문 분석되는 상대 리소스 경로입니다. 정적: 이 디렉터리의 파일은 webpack에 의해 처리되지 않습니다. 간단히 말하면, 타사 파일이 저장되는 장소는 처리되지 않습니다. webpack으로 파싱합니다. 최종 패키징 디렉터리에 직접 복사됩니다(기본값은 dist/static). 이러한 파일은 config.js 파일의 <code>build.assetsPublic
및 build.assertsSubDirectory
링크를 통해 결정되는 절대 경로를 사용하여 참조되어야 합니다. static/에 있는 모든 파일은 절대 경로인 /static[파일 이름] 형식으로 참조되어야 합니다. img src=”./logo.png”>
和<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:url(./logo.png)
,”./logo.png”是相对资源路径,将有webpack解析为模块依赖 build.assetsPublic
和build.assertsSubDirectory
链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename] 问题来了,用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
웹팩의 특성에 따라 일반적으로 정적 파일은 변경되지 않으며 세 번째 파일인 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>
images:[{src:”/static/1.png”},{src:”/static/2.png”}와 같이 절대 경로를 작성해야 합니다. ]그림도 표시됩니다. 물론 <code>webpack.base.config.js
에 정의하여 경로 작성 길이를 단축할 수도 있습니다. 물론 로컬 이미지가 너무 많으면 이렇게 작성하는 것이 번거롭다고 하셨죠. 그런데 사실 저희는 이렇게 작업을 단순화합니다.
1단계: static에서 새 json 폴더 만들기
3부: 해당 vue 파일에 json을 도입하고 구문 분석합니다. 참고
위 내용은 vue:src가 파일 경로 오류를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!