原因分析
VUE プロジェクトでは、Img の src を動的に変更する必要がある場合がありますが、 src が静的リソースとして扱われ、コンパイルされていないため、直接変更すると画像が表示されません。
<template>
<div class="first">
<!-- 普通加载 （不显示）出错-->
<el-carousel height="280px">
<el-carousel-item v-for="(item,index) in banners" :key="index">
<img :src="item" alt="">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
// 定义数据
data(){
return {
banners:["./2.jpeg","./3.jpeg"],
}
},
}
</script>
解決
最初のものは、写真を紹介するために require を使用します
<template>
<el-carousel height="280px">
<el-carousel-item v-for="(item,index) in banners" :key="index">
<img :src="item" alt="">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
// 定义数据
data(){
return {
banners: [require('../../assets/images/banner1.jpg'), require('../../assets/images/banner2.jpg'), require('../../assets/images/banner3.jpg')]
}
},
}
</script>
2 番目の方法では、最初に画像をファイルにインポートします。
<template>
<el-carousel height="280px">
<el-carousel-item v-for="(item,index) in banners" :key="index">
<img :src="item" alt="">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import img1 from "../../assets/images/banner1.jpg"
import img2 from "../../assets/images/banner2.jpg"
import img3 from "../../assets/images/banner3.jpg"
export default {
// 定义数据
data(){
return {
banners:[img1,img2,img3]
}
},
}
</script>
3 番目の方法は、画像を vue プロジェクトのパブリック フォルダーに置き、ルート ディレクトリで呼び出すことです。
<template>
<el-carousel height="280px">
<el-carousel-item v-for="(item,index) in banners" :key="index">
<img :src="item" alt="">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
// 定义数据
data(){
return {
banners: ['/banner1.jpg','/banner2.jpg','/banner3.jpg']
}
},
}
</script>
効果を達成する
