이번에는 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의 전체 코드는 다음과 같습니다.
{{ item.title }} <img src="../assets/a1.png" class="" width="100%"/> <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" />
:src="imgUrl">
또는 rrreee
의 srcs 속성은 일반 HTML 구문 참조 경로를 기반으로 합니다. 템플릿에 배치하면 webpack으로 패키징할 수 있습니다.2
를 사용하세요. js 코드에서 이미지 경로를 작성해야 할 때
imgUrl:'../assets/logo.png'
라고 쓰면 됩니다. , webpack은 이를 문자열로만 처리하므로 이미지 주소를 찾을 수 없습니다. 이때 가져오기를 사용하여 이미지 경로를 소개할 수 있습니다:
rrreee
avatar: Avatar
🎜🎜 🎜 시나리오 3🎜🎜🎜이미지를 외부 정적 폴더에 넣은 다음 데이터에 정의할 수도 있습니다. 🎜rrreee🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜jQuery+koa2로 Ajax 요청을 구현하는 방법🎜🎜🎜🎜🎜iview의 잘못 정렬된 선택 드롭다운 상자 옵션을 처리하는 방법🎜🎜🎜위 내용은 Vue의 로컬 정적 이미지 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!