집 > 기사 > 웹 프론트엔드 > Vue 단일 파일의 참조 경로에 대한 방법은 무엇입니까?

Vue 단일 파일의 참조 경로에 대한 방법은 무엇입니까?

亚连원래의: 2018-06-13 11:25:131308검색

이 글에서는 Vue 단일 파일의 참조 경로 처리에 대한 관련 정보를 주로 소개합니다. 이 글에서는 vue.js를 배우고 사용하는 모든 사람이 참조할 수 있는 학습 가치가 있습니다. 따라올 수 있습니다. 와서 저와 함께 배우세요.

Foreword

Vue의 단일 파일 구성 요소는 Vue를 사용할 때 매우 일반적으로 사용됩니다. Vue 단일 파일 개발 프로세스 중에 파일 경로 처리는 a1f02c36ba31691bcfe87b2722de723b , 배경 스타일 처리 등 다음은 다양한 시나리오에서 a1f02c36ba31691bcfe87b2722de723b의 src 처리에 대해 설명하고 vue+webpack을 사용하여 개발 프로세스 중에 정적 리소스(예: 이미지 처리)를 올바르게 참조하는 방법을 설명합니다.

아래에 표시된 것처럼 다양한 시나리오에서 이미지 경로를 참조하는 예는 아래 단일 파일 구성 요소에 제공됩니다(이미지 정적 리소스는 src/assets/small.png에 저장됨).

<template>
 <p id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片资源测试">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 };
 },
}
</script>

위의 코드 조각은 4가지 유형을 제공합니다. 시나리오에서는 img 태그를 사용하여 Vue 단일 파일 구성 요소의 이미지 리소스를 참조합니다. 물론 이 네 가지 방법 모두가 이미지 리소스를 올바르게 로드할 수 있는 것은 아닙니다.

시나리오 1:

템플릿의 상대 경로를 사용하여 src 속성에 직접 바인딩하면 이미지 리소스를 올바르게 로드할 수 있습니다. 우리는 웹팩이 vue 단일 파일 구성요소를 처리하는 과정에서 vue-loader가 주로 *.vue 파일 처리를 담당한다는 것을 알고 있습니다. vue-loader 문서의 vue-loader 리소스 경로 처리 섹션에서는 vue-loader가 템플릿에서 리소스 경로를 처리하는 방법을 설명합니다. 예: f8d9cde947de1719581060b617c87f21, background: url(), @import 등은 모듈 종속성으로 처리됩니다. 즉, 이러한 경우 vue-loader는 경로의 리소스 참조와 최종 경로 교체를 자동으로 처리합니다. img 처리는 다음과 같습니다.

<img src="./logo.png">

는 vue 템플릿 컴파일러에 의해 다음과 같이 컴파일됩니다.

createElement(&#39;img&#39;, { attrs: { src: require(&#39;./logo.png&#39;) }})

이것은 또한 vue-loader가 자동으로 리소스 및 경로 가져오기를 도와주기 때문에 사례 1에서 이미지 콘텐츠가 올바르게 표시될 수 있는 이유를 설명합니다. 교체 문제.

사례 2:

상대 경로 문자열 변수가 템플릿의 src 속성에 바인딩되어 있으면 이미지가 정상적으로 표시되지 않습니다. 그 이유는 vue-loader가 변수가 경로 문자열인지 식별할 수 없기 때문에 vue-loader가 자동으로 리소스를 도입하고 경로 교체를 하는 데에는 문제가 없습니다. 이 경우 컴파일된 템플릿은 여전히 상대 경로 문자열입니다. 분명히 해당 리소스 소개와 잘못된 경로가 없으면 이미지가 올바르게 표시될 수 없습니다.

상황 3:

상대 경로를 올바르게 표시할 수 없는 경우 많은 사람들이 절대 경로 변수를 사용하여 이미지를 가져오려고 합니다. 분명히 이 경우 이미지 리소스를 수동으로 가져오지 않았기 때문에 이미지를 표시할 수 없습니다. 참고: 많은 학생들이 리소스를 수동으로 도입한 다음 절대 경로 변수에 따라 src를 바인딩하려고 시도합니다. 실제로 dist/static/img/ 경로 아래에 참조된 리소스가 있지만 vue-cli 웹팩 템플릿의 url-loader가 있음을 발견합니다. img 유형 파일에서는 작동하지 않습니다. 로드 시 해시 값 처리가 추가됩니다. 이 경우 절대 경로 변수를 바인딩하더라도 해시 값이 추가된 이미지 파일과 정확하게 일치하지 않기 때문에 이미지를 올바르게 참조할 수 없습니다. 이미지를 수동으로 도입해야 하는 경우 상황 4에 대한 접근 방식이 권장됩니다.

사례 4:

템플릿에서 src 속성은 수동으로 도입된 이미지 리소스에 직접 바인딩됩니다. 이 경우 이미지가 올바르게 표시될 수 있습니다. 이 방법은 자동으로 가져온 경로에 해당하는 리소스를 처리할 때 vue-loader에서도 사용됩니다.

요약하자면, vue 단일 파일 구성 요소에서 이미지를 올바르게 표시하는 열쇠는 다음과 같습니다.

이미지 리소스가 필요하거나 가져온 경우 webpack의 url-loader에 의해 최종 디렉터리로 처리됩니다
img src 속성을 최종 이미지 리소스 경로로 바꿔야 합니다

위의 두 가지 사항은 필수입니다. Case 1과 Case 4에서 그림이 올바르게 표시될 수 있는 이유는 두 경우 모두 위의 두 가지 조건이 충족되기 때문입니다. 첫 번째 경우에는 vue-loader가 자동으로 이 작업을 수행했고, 네 번째 경우에는 수동으로 수행했습니다.

개발 중에 발생할 수 있는 문제:

개발 중에 그림 목록이 루프로 렌더링되는 시나리오가 발생할 수 있습니다. 위의 요약을 기반으로 그림 정보 개체의 배열을 구성할 수 있습니다. 예:

<template>
 <p id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
import bigImg from &#39;./assets/big.jpg&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 imgList: [
 { id: 1, title: &#39;test1&#39;, src: require(&#39;./assets/logo1.png&#39;) },
 { id: 2, title: &#39;test2&#39;, src: require(&#39;./assets/logo2.png&#39;) },
 { id: 3, title: &#39;test3&#39;, src: require(&#39;./assets/logo3.png&#39;) },
 ],
 };
 },
}
</script>

이것은 우리가 렌더링한 그림을 루프로 완벽하게 표시할 수 있습니다.

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

Vue 단일 파일의 참조 경로에 대한 방법은 무엇입니까?

관련 기사