vue에서 로컬 정적 이미지를 참조하는 방법-JS 튜토리얼-php.cn

vue에서 로컬 정적 이미지를 참조하는 방법

php中世界最好的语言

풀어 주다： 2018-04-11 17:13:50

원래의

11362명이 탐색했습니다.

이번에는 Vue에서 로컬 정적 이미지를 참조하는 방법을 보여드리겠습니다. Vue에서 로컬 정적 이미지를 인용할 때 주의 사항은 무엇입니까?

여기에 사진 설명을 쓰세요

요구 사항: 구성 요소의 index.vue가 어떻게 자산에서 사진을 가져올 수 있습니까?

1. img 태그에

<img src="../assets/a1.png" class="" width="100%"/>

로그인 후 복사

경로를 직접 작성하세요. 2. 배열을 사용하여 출력 저장 및 재활용:

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),

로그인 후 복사

효과는 다음과 같습니다:

index.vue의 전체 코드는 다음과 같습니다:


<script>
  import footer1 from '../components/public/footer'
  export default {
  data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>

로그인 후 복사

PS: Vue.js

의 이미지 참조 경로를 살펴보겠습니다. Vue.js 프로젝트에서 이미지를 참조할 때 이미지 경로와 관련하여 다음과 같은 상황이 있습니다.

하나를 사용하세요

데이터에서 이미지 경로를 정의합니다

imgUrl:'../assets/logo.png'imgUrl:'../assets/logo.png'

然后，在template模板里面

<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="
{{imgUrl}}">

로그인 후 복사

这样是错误的写法，我们应该用v-bind绑定图片的srcs属性

:src="imgUrl">

或者

<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">

로그인 후 복사

这种方式是按照正常HTML语法引用路径，放在模板里可以被webpack打包出来。

使用二

当我们需要在js代码里面写图片路径的时候，如果我们在data里面写

imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址，此时我们可以使用import引入图片路径：

:src="avatar" />
import avatar from '@/assets/logo.png'

로그인 후 복사

在data里面定义

avatar: avatar

그런 다음 템플릿 내부

imgUrl ： '../../static/logo.png'
:src="imgUrl" />

로그인 후 복사

이것은 잘못된 작성 방법입니다. 이미지의 srcs 속성을 바인딩하려면 v-bind를 사용해야 합니다. :src="imgUrl"> 아니면

rrreee

이 방법은 일반적인 HTML 구문에 따른 경로를 참조하며, 템플릿에 배치 시 webpack으로 패키징할 수 있습니다.

2개를 사용하세요

js 코드에 이미지 경로를 써야 할 때 데이터에 쓰면

imgUrl:'../assets/logo.png'
현재 webpack은 이를 문자열로만 처리하므로 이미지 주소를 찾을 수 없습니다. 이때 import를 사용하여 이미지 경로를 소개할 수 있습니다:

rrreee

데이터로 정의하세요 아바타: 아바타

시나리오 3🎜🎜🎜 이미지를 외부 정적 폴더에 넣고 데이터에서 정의할 수도 있습니다. 🎜rrreee🎜 위는 Vue.js에서 이미지 경로를 참조하는 방법입니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜Vue가 프로젝트 패키징 후 새로고침되고 404를 표시할 때 404를 처리하는 방법🎜🎜🎜🎜🎜Vue가 xe-utils 함수 라이브러리를 사용하는 단계에 대한 자세한 설명🎜🎜🎜🎜

위 내용은 vue에서 로컬 정적 이미지를 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!