Vue.jsを使ってスライドショーを実装中なのですが参考
スライドショーの動きはあるのですが、画像が表示されません
assets/images配下にある画像を表示させたいのですが、指定方法が間違っているのでしょうか?
requireなど試してみましたが、うまくいきませんでした
画像を表示させたいです
####Vue.js
window.onload=function(){ new Vue({ el: '#app', data: { current_slide: 0, slides: [ {img: "@/assets/images/81573810.jpeg"}, {img: "@/assets/images/ball.jpg"} ], }, mounted() { setInterval(() => { this.current_slide = this.current_slide < this.slides.length -1 ? this.current_slide +1 : 0 }, 6000) } }) }
####HTML
<div id="app"> <div class="header"> <transition name="fade"> <div class="slider-inner" :key="idx" v-for="(slide, idx) in slides" v-if="current_slide == idx"> <img class="slide-img" v-bind:src="slides[idx].img" :key="slides[idx].img" width="450" height="300"> <h1>試合記事</h1> </div> </transition> </div> </div>
####試した指定方法
{img: require("@/assets/images/81573810.jpeg"}), //Vue.js自体が動かない? {img: "~/assets/images/81573810.jpeg"}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。