vue에서 로컬 정적 이미지 경로 구현(자세한 튜토리얼)

이 글에서는 Vue에서 로컬 정적 이미지 경로를 작성하는 방법과 Vue.js에서 이미지 경로를 참조하는 방법을 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.

여기에 이미지 설명을 작성하세요

요구 사항: index.vue를 사용하는 방법 구성 요소 자산에서 사진을 꺼낼 수 있습니다.

1. img 태그에 직접 경로를 작성합니다.

<img  src="/static/imghwm/default1.png"  data-src="../assets/a1.png"  class="lazy"   class=""    style="max-width:90%"/ alt="vue에서 로컬 정적 이미지 경로 구현(자세한 튜토리얼)" >

2. 배열을 사용하여 출력을 저장하고 재활용합니다.

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img  class="carouselImg lazy"  src="/static/imghwm/default1.png"  data-src="item.url"  : / alt="vue에서 로컬 정적 이미지 경로 구현(자세한 튜토리얼)" >
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),

효과는 다음과 같습니다.

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

<script>
  import footer1 from &#39;../components/public/footer&#39;
  export default {
  data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,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를 사용해야 합니다. srcs 속성 :src="imgUrl">

또는

rrreee

은 일반적인 HTML 구문에 따른 경로를 참조하며 패키징될 수 있습니다. 템플릿에 배치할 때 webpack을 통해.

2

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

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

rrreee

Defined in dataavatar: Avatar

🎜 🎜 시나리오 3🎜🎜🎜이미지를 외부 정적 폴더에 넣은 다음 데이터에서 정의할 수도 있습니다.🎜rrreee🎜위는 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜vue에서 요청한 데이터에서 특정 항목의 값을 변경하는 방법🎜🎜🎜🎜Vue 프로젝트에서 프로젝트 구조를 초기화하기 위해 vue-cli 스캐폴딩을 사용하는 자세한 설명🎜🎜🎜🎜implemented by vue와 vue-i18n 결합 배경 데이터에 대한 다국어 전환 방법🎜🎜

위 내용은 vue에서 로컬 정적 이미지 경로 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!