回答編集履歴
2
v-bind:が抜けているミスがあったため修正
answer
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
```javascript
|
|
15
15
|
<div class="pictures">
|
|
16
16
|
<div class="picture">
|
|
17
|
-
<img src=require('./assets/images/pexels-photo-976906.jpeg')>
|
|
17
|
+
<img v-bind:src=require('./assets/images/pexels-photo-976906.jpeg')>
|
|
18
18
|
</div>
|
|
19
19
|
```
|
|
20
20
|
|
1
言い方が回りくどかったため修正
answer
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
VueアプリケーションをVue CLIで構築する際、アプリケーションの構成ディレクトリ内のファイルを再構成して``dist``ディレクトリへ再配置する、という仕様があります。
|
|
5
5
|
|
|
6
|
-
実際にアプリケーションを動かす際、Vueアプリケーションが参照するのはdistディレクトリの中です。
|
|
6
|
+
実際にアプリケーションを動かす際、Vueアプリケーションが参照するのはdistディレクトリの中です。実際に画像が配置されているフォルダを直接参照することはできません。その結果、アプリケーションは動作しても、画像が表示されない状態になってしまうのです。
|
|
7
7
|
|
|
8
8
|
これを回避するためには、画像パスを``require()``で囲んであげます。このようにすると、Vueアプリケーション実行時、Vueがdist内に配置された画像のパスを参照してくれます。
|
|
9
9
|
|