質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2013閲覧

vue-cliにおいて、v-forでレンダリングした要素の背景を動的に変更したい

take-t.t.

総合スコア360

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/15 16:11

前提・実現したいこと

いつもお世話になっております。
タイトルの通りで、下記の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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Vue CLI の docs の 該当ページ にあるように、アセットをインポートする方法は2つあります。

  1. JSから import する (webpack によってそのアセットが処理されることになるが、ビルド時にパスが分かっている必要がある)

  2. public フォルダーにアセットを配置し、絶対パスを指定する (public フォルダー内のファイルはすべてそのままコピーされる)

1.の方法では次のようします (@ は src フォルダーのエイリアス)。

js

1import img1 from '@/assets/images/address-manager.png' 2 3// ... 4 5{ 6 image: img1 7}

2.の方法では、public/images/address-manager.png に配置したとすると、次のようになります。

js

1import img1 from '@/assets/images/address-manager.png' 2 3// ... 4 5data () { 6 return { 7 publicPath: process.env.BASE_URL, 8 works: [ 9 { 10 image: 'images/address-manager.png' 11 } 12 ] 13 } 14}

html

1<div :style="{ backgroundImage: `url('${publicPath}${work.image}')` }"> 2</div>

投稿2019/07/15 18:35

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/07/16 13:39

返信が遅れてしまい申し訳ありません。 教えて頂いた方法で無事背景が表示されました。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問