前提・実現したいこと
いつもお世話になっております。
タイトルの通りで、下記のhtmlコード内の<!-- 表示されない・動的に変更したい -->と書かれている部分のbackground-imageを、配列works内のimageプロパティを使って動的に変更したいと考えております。
こちらのページ(githubに飛びます)を参考にしながら自分なりにやってみたのですが、思い通りの挙動になりませんでした。
静的に表示するにはv-bind:style="{ backgroundImage': `url(${require('../assets/images/portfolio.png')})` }"
のようにすると出来るのですが、この部分をどう変更すれば動的に変更できるようになるのか分からず困っています。
皆様、宜しければお力添えをお願いいたします。
ディレクトリ構造
src
│─assets
│ ├─images
│ │ portfolio.png ←表示したいファイル
│ │
│ └─styles
│
├─components
│
└─views
│ Works.vue ←現在のファイル
該当のソースコード
html
1<template> 2 <section> 3 <div class="works-box"> 4 <h3>My Works</h3> 5 <div class="works-wrapper"> 6 <div class="works" 7 v-for="work in works" 8 v-bind:key="work.id" 9 v-bind:style="{ backgroundImage: `url('${work.image}')` }"> <!-- 表示されない・動的に変更したい --> 10 <div class="back_img-wrapper"> 11 <h4><span v-html="work.icon"><!-- work.icon --></span>{{ work.name }}</h4> 12 <p>{{ work.description }}</p> 13 <a v-bind:href="work.github" target=”_blank”>Details <i class="fas fa-angle-right"></i></a> 14 </div> <!-- back_img-wrapper --> 15 </div> <!-- works --> 16 </div> <!-- works-wrapper --> 17 </div> 18 <router-link to="/" class="move"><i class="fas fa-angle-left"></i> BACK</router-link> 19 </section> 20</template>
JavaScript
1<script> 2export default { 3 name: 'works', 4 data() { 5 return { 6 works: [ 7 {id: 1, name: 'ポートフォリオサイト' ,icon: '<i class="fas fa-pager"></i>' ,image: '../assets/images/portfolio.png', github: '', 8 description: ` 9 text 10 ` 11 }, 12 {id: 2, name: 'アドレス帳アプリ' ,icon: '<i class="far fa-address-card"></i>' ,image: '../assets/images/address-manager.png', github: '', 13 description: ` 14 text 15 ` 16 }, 17 {id: 3, name: '過去の残骸達' ,icon: '<i class="fas fa-globe"></i>' ,image: '../assets/images/past.png' ,github: '', 18 description: ` 19 text 20 ` 21 }, 22 ] //works 23 } //return 24 }, 25} 26</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/16 13:39