teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Vue.js】スライダーの画像を動的に変更したい

編集履歴

質問編集履歴

4

インデント修正

2021/10/21 08:39

投稿

katahik
katahik

スコア79

test CHANGED
File without changes
test CHANGED
@@ -66,10 +66,6 @@
66
66
 
67
67
  </figure>
68
68
 
69
-
70
-
71
-
72
-
73
69
  <figure>
74
70
 
75
71
  <a class="img-box img320" @click.prevent.stop="show(1)">
@@ -88,10 +84,6 @@
88
84
 
89
85
  </figure>
90
86
 
91
-
92
-
93
-
94
-
95
87
  <figure>
96
88
 
97
89
  <a class="img-box img320" @click.prevent.stop="show(2)">
@@ -152,8 +144,6 @@
152
144
 
153
145
  post_sub2_image_url: '',
154
146
 
155
-
156
-
157
147
  media: [
158
148
 
159
149
  {
@@ -194,10 +184,6 @@
194
184
 
195
185
  },
196
186
 
197
-
198
-
199
-
200
-
201
187
  methods: {
202
188
 
203
189
  show: function (index) {
@@ -250,17 +236,7 @@
250
236
 
251
237
  },
252
238
 
253
-
254
-
255
-
256
-
257
- },
239
+ },
258
-
259
-
260
-
261
-
262
-
263
- // インスタンス生成後、リアクティブデータ初期化後
264
240
 
265
241
  created() {
266
242
 
@@ -270,8 +246,6 @@
270
246
 
271
247
 
272
248
 
273
-
274
-
275
249
  }
276
250
 
277
251
 

3

改善

2021/10/21 08:39

投稿

katahik
katahik

スコア79

test CHANGED
File without changes
test CHANGED
@@ -1,30 +1,46 @@
1
+ ## 前提・実現したいこと
2
+
1
- 現在、vue-image-lightboxでスライダーを作成しています。
3
+ vue-image-lightboxで画像のスライダーを作成しています。
4
+
2
-
5
+ サーバーサイドからもらったデータによってスライダーの画像を動的に変更したい。
6
+
7
+
8
+
3
-
9
+ ## 環境
10
+
4
-
11
+ Vue.js 2.6.10
12
+
13
+
14
+
15
+
16
+
17
+ ## 発生している問題・エラーメッセージ
18
+
19
+ この3枚のいずれかの画像をクリックすれば、スライダー表示となりますが
20
+
5
- ![![イメージ説明](1801e113dccbba8fe019ecad57b8d25c.png)]
21
+ ![イメージ説明](fafb45e10c622ee176d1eeef17ac03bb.png)
6
-
7
-
8
-
9
- しかし、今、サンプルで静的なsrcを記載して画像をスライダーにしているので、このsrcを動的なものに変更して、それに合わせた画像を表示させたいと思っています。
22
+
10
-
11
-
12
-
23
+
24
+
13
- そこで、下記のとおり、コードを記述しましたが、imgのsrcがundefindになっており、画像が表示されません。
25
+ しかし、下のように画像が表示されません
14
-
26
+
15
- ![![イメージ説明](6a176aeeef3a94a032d60e3d601551f2.png)]
27
+ ![![イメージ説明](3eab17e07b597b96d203ac40fffc6d85.png)]
16
-
17
-
18
-
28
+
29
+
30
+
19
- ここに /uploads/1 を格納したはずが、undefindになっております。
31
+ そこで、chromeのdevツールのVueで中身をみてみると下記のとおり、undefinedになっております。だから、画像が表示されないのではないかと思っております。
20
-
32
+
21
- **なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。**
33
+ ![![イメージ説明](3a9649fdeaf5ec5be96486cea0bdba7a.png)]
22
-
23
-
24
-
34
+
35
+
36
+
37
+
38
+
39
+
40
+
25
- 皆様の知恵をお貸しいただければと思います。
41
+ ## 該当のソースコード
42
+
26
-
43
+ show.vue
27
-
28
44
 
29
45
  ```
30
46
 
@@ -32,30 +48,74 @@
32
48
 
33
49
  <div>
34
50
 
51
+
52
+
35
- <figure class="mr-3">
53
+ <figure>
36
-
54
+
37
- <a class="img-box" @click.prevent.stop="show(0)">
55
+ <a class="img-box img320" @click.prevent.stop="show(0)">
38
-
56
+
39
- <img
57
+ <img
58
+
40
-
59
+ :src="challenge.post_main_image_url"
60
+
61
+ :alt="post.post_main_image_filename">
62
+
63
+ </a>
64
+
65
+ <figcaption>{{ post.main_image_title }}</figcaption>
66
+
67
+ </figure>
68
+
69
+
70
+
71
+
72
+
73
+ <figure>
74
+
75
+ <a class="img-box img320" @click.prevent.stop="show(1)">
76
+
77
+ <img
78
+
41
- :src="post.main_image_url"
79
+ :src="post.post_sub1_image_url"
42
-
80
+
43
- :alt="post.main_image_url"
81
+ :alt="post.post_sub2_image_filename"
44
-
82
+
45
- >
83
+ >
46
-
84
+
47
- </a>
85
+ </a>
86
+
48
-
87
+ <figcaption>{{ post.sub1_image_title }}</figcaption>
88
+
49
- </figure>
89
+ </figure>
90
+
91
+
92
+
93
+
94
+
50
-
95
+ <figure>
96
+
51
- <ImageLightBox :media="media" ref="lightbox" :show-light-box="false" :show-caption="true"></ImageLightBox>
97
+ <a class="img-box img320" @click.prevent.stop="show(2)">
98
+
99
+ <img
100
+
101
+ :src="post.post_sub2_image_url"
102
+
103
+ :alt="post.post_sub2_image_filename"
104
+
105
+ >
106
+
107
+ </a>
108
+
109
+ <figcaption>{{ post.sub2_image_title }}</figcaption>
110
+
111
+ </figure>
112
+
113
+
52
114
 
53
115
  </div>
54
116
 
55
117
  </template>
56
118
 
57
-
58
-
59
119
  <script>
60
120
 
61
121
  import ImageLightBox from 'vue-image-lightbox';
@@ -82,24 +142,52 @@
82
142
 
83
143
  return {
84
144
 
145
+ post_id: this.$route.params.post_id,
146
+
85
147
  post: {},
86
148
 
87
149
  post_main_image_url: '',
88
150
 
151
+ post_sub1_image_url: '',
152
+
153
+ post_sub2_image_url: '',
154
+
155
+
156
+
89
157
  media: [
90
158
 
91
159
  {
92
160
 
93
- // src: "/uploads/1" とするとうまくいく
161
+ // src: "/uploads/1"とするとうまくいく
94
162
 
95
163
  thumb: this.post_main_image_url,
96
164
 
97
165
  src: this.post_main_image_url,
98
166
 
99
- title: '朝日が昇る摩周湖（北海道川上郡弟子屈町）',
167
+ id: 1
100
168
 
101
169
  },
102
170
 
171
+ {
172
+
173
+ thumb: this.post_sub1_image_url,
174
+
175
+ src: this.post_sub1_image_url,
176
+
177
+ id: 2
178
+
179
+ },
180
+
181
+ {
182
+
183
+ thumb: this.post_sub2_image_url,
184
+
185
+ src: this.post_sub2_image_url,
186
+
187
+ id: 3
188
+
189
+ }
190
+
103
191
  ],
104
192
 
105
193
  }
@@ -108,23 +196,25 @@
108
196
 
109
197
 
110
198
 
199
+
200
+
111
201
  methods: {
112
202
 
113
- show: function(index){
203
+ show: function (index) {
114
204
 
115
205
  this.$refs.lightbox.showImage(index)
116
206
 
117
207
  },
118
208
 
119
- // データ取得
209
+
120
-
210
+
121
- getData() {
211
+ getPost() {
122
212
 
123
213
  this.$loading.load(
124
214
 
125
215
  this.$auth.api.get(
126
216
 
127
- 'posts/' + this.post_id, {
217
+ 'su/posts/' + this.post_id, {
128
218
 
129
219
  params: {}
130
220
 
@@ -136,23 +226,19 @@
136
226
 
137
227
 
138
228
 
139
- let mainImageUrl = res.data.post.main_image_url;
229
+ this.post_main_image_url = res.data.post.post_main_image_url;
230
+
140
-
231
+ this.post_sub1_image_url = res.data.post.post_sub1_image_url;
232
+
233
+ this.post_sub2_image_url = res.data.post.post_sub2_image_url;
234
+
141
- console.log(mainImageUrl)
235
+ console.log(this.post_main_image_url)
236
+
142
-
237
+ console.log(this.post_sub1_image_url)
238
+
239
+ console.log(this.post_sub2_image_url)
240
+
143
- // =>/uploads/1
241
+ // /uploads/1
144
-
145
- let stringMainImageUrl = String(mainImageUrl)
146
-
147
- console.log(stringMainImageUrl)
148
-
149
- // =>/uploads/1
150
-
151
- this.post_main_image_url = stringMainImageUrl
152
-
153
- console.log(String(this.post_main_image_url))
154
-
155
- // =>/uploads/1
156
242
 
157
243
  }).catch(err => {
158
244
 
@@ -162,20 +248,34 @@
162
248
 
163
249
  )
164
250
 
165
- }
251
+ },
166
-
167
-
168
-
252
+
253
+
254
+
255
+
256
+
169
- }
257
+ },
258
+
259
+
260
+
261
+
262
+
263
+ // インスタンス生成後、リアクティブデータ初期化後
170
264
 
171
265
  created() {
172
266
 
173
- this.getData();
267
+ this.getPost();
174
-
268
+
175
- },
269
+ },
270
+
271
+
272
+
273
+
176
274
 
177
275
  }
178
276
 
277
+
278
+
179
279
  </script>
180
280
 
181
281
  ```

2

修正

2021/10/21 08:37

投稿

katahik
katahik

スコア79

test CHANGED
File without changes
test CHANGED
@@ -27,8 +27,6 @@
27
27
 
28
28
 
29
29
  ```
30
-
31
-
32
30
 
33
31
  <template>
34
32
 
@@ -92,7 +90,7 @@
92
90
 
93
91
  {
94
92
 
95
- // src: "/uploads/1"とするとうまくいく
93
+ // src: "/uploads/1" とするとうまくいく
96
94
 
97
95
  thumb: this.post_main_image_url,
98
96
 
@@ -108,9 +106,17 @@
108
106
 
109
107
  },
110
108
 
109
+
110
+
111
111
  methods: {
112
112
 
113
+ show: function(index){
114
+
115
+ this.$refs.lightbox.showImage(index)
116
+
117
+ },
118
+
113
- // データ取得処理
119
+ // データ取得
114
120
 
115
121
  getData() {
116
122
 
@@ -158,7 +164,15 @@
158
164
 
159
165
  }
160
166
 
167
+
168
+
161
169
  }
170
+
171
+ created() {
172
+
173
+ this.getData();
174
+
175
+ },
162
176
 
163
177
  }
164
178
 

1

修正

2021/10/21 05:53

投稿

katahik
katahik

スコア79

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- しかし、今、サンプルで静的ｓｒｃを記載することで画像をスライダーにしているので、srcを動的にして画像を変更したい思っています。
9
+ しかし、今、サンプルで静的なsrcを記載して画像をスライダーにしているので、このsrcを動的なものに変更して、それに合わせた画像を表示させたいと思っています。
10
10
 
11
11
 
12
12
 
@@ -18,7 +18,7 @@
18
18
 
19
19
  ここに /uploads/1 を格納したはずが、undefindになっております。
20
20
 
21
- なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。
21
+ **なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。**
22
22
 
23
23
 
24
24