Vue의 로컬 정적 이미지 경로-H5 튜토리얼-php.cn

Vue의 로컬 정적 이미지 경로

php中世界最好的语言

풀어 주다： 2018-03-27 17:48:22

원래의

2475명이 탐색했습니다.

이번에는 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" />

로그인 후 복사

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

또는

rrreee

의 srcs 속성은 일반 HTML 구문 참조 경로를 기반으로 합니다. 템플릿에 배치하면 webpack으로 패키징할 수 있습니다.

2
를 사용하세요. js 코드에서 이미지 경로를 작성해야 할 때

imgUrl:'../assets/logo.png'라고 쓰면 됩니다. , webpack은 이를 문자열로만 처리하므로 이미지 주소를 찾을 수 없습니다. 이때 가져오기를 사용하여 이미지 경로를 소개할 수 있습니다:
rrreee

Defined in data🎜🎜avatar: Avatar🎜🎜 🎜 시나리오 3🎜🎜🎜이미지를 외부 정적 폴더에 넣은 다음 데이터에 정의할 수도 있습니다. 🎜rrreee🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜jQuery+koa2로 Ajax 요청을 구현하는 방법🎜🎜🎜🎜🎜iview의 잘못 정렬된 선택 드롭다운 상자 옵션을 처리하는 방법🎜🎜🎜

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