teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

インデント修正

2021/10/21 08:39

投稿

katahik
katahik

スコア79

title CHANGED
File without changes
body CHANGED
@@ -32,8 +32,6 @@
32
32
  </a>
33
33
  <figcaption>{{ post.main_image_title }}</figcaption>
34
34
  </figure>
35
-
36
-
37
35
  <figure>
38
36
  <a class="img-box img320" @click.prevent.stop="show(1)">
39
37
  <img
@@ -43,8 +41,6 @@
43
41
  </a>
44
42
  <figcaption>{{ post.sub1_image_title }}</figcaption>
45
43
  </figure>
46
-
47
-
48
44
  <figure>
49
45
  <a class="img-box img320" @click.prevent.stop="show(2)">
50
46
  <img
@@ -75,7 +71,6 @@
75
71
  post_main_image_url: '',
76
72
  post_sub1_image_url: '',
77
73
  post_sub2_image_url: '',
78
-
79
74
  media: [
80
75
  {
81
76
  // src: "/uploads/1"とするとうまくいく
@@ -96,8 +91,6 @@
96
91
  ],
97
92
  }
98
93
  },
99
-
100
-
101
94
  methods: {
102
95
  show: function (index) {
103
96
  this.$refs.lightbox.showImage(index)
@@ -124,17 +117,11 @@
124
117
  })
125
118
  )
126
119
  },
127
-
128
-
129
120
  },
130
-
131
-
132
- // インスタンス生成後、リアクティブデータ初期化後
133
121
  created() {
134
122
  this.getPost();
135
123
  },
136
124
 
137
-
138
125
  }
139
126
 
140
127
  </script>

3

改善

2021/10/21 08:39

投稿

katahik
katahik

スコア79

title CHANGED
File without changes
body CHANGED
@@ -1,32 +1,62 @@
1
+ ## 前提・実現したいこと
1
- 現在、vue-image-lightboxでスライダーを作成しています。
2
+ vue-image-lightboxで画像のスライダーを作成しています。
3
+ サーバーサイドからもらったデータによってスライダーの画像を動的に変更したい。
2
4
 
5
+ ## 環境
3
- ![![イメージ説明](1801e113dccbba8fe019ecad57b8d25c.png)]
6
+ Vue.js 2.6.10
4
7
 
5
- しかし、今、サンプルで静的なsrcを記載して画像をスライダーにしているので、このsrcを動的なものに変更して、それに合わせた画像を表示させたいと思っています。
6
8
 
9
+ ## 発生している問題・エラーメッセージ
7
- で、下記とおり、コードを記述しましたが、imgsrcがundefindになっており、画像表示されせん。
10
+ この3枚いずれかの画像をクリックすれば、スライダー表示となりすが
8
- ![![イメージ説明](6a176aeeef3a94a032d60e3d601551f2.png)]
11
+ ![イメージ説明](fafb45e10c622ee176d1eeef17ac03bb.png)
9
12
 
13
+ しかし、下のように画像が表示されません
10
- ここに /uploads/1 を格納したはずが、undefindになっております。
14
+ ![![イメージ説明](3eab17e07b597b96d203ac40fffc6d85.png)]
11
- **なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。**
12
15
 
13
- 皆様知恵をお貸しいたと思ます。
16
+ そこで、chromedevツールのVueで中身みてみると下記のとり、undefinedになっております。から、画像が表示さないのではないかと思っております。
17
+ ![![イメージ説明](3a9649fdeaf5ec5be96486cea0bdba7a.png)]
14
18
 
19
+
20
+
21
+ ## 該当のソースコード
22
+ show.vue
15
23
  ```
16
24
  <template>
17
25
  <div>
26
+
18
- <figure class="mr-3">
27
+ <figure>
19
- <a class="img-box" @click.prevent.stop="show(0)">
28
+ <a class="img-box img320" @click.prevent.stop="show(0)">
20
- <img
29
+ <img
30
+ :src="challenge.post_main_image_url"
31
+ :alt="post.post_main_image_filename">
32
+ </a>
33
+ <figcaption>{{ post.main_image_title }}</figcaption>
34
+ </figure>
35
+
36
+
37
+ <figure>
38
+ <a class="img-box img320" @click.prevent.stop="show(1)">
39
+ <img
21
- :src="post.main_image_url"
40
+ :src="post.post_sub1_image_url"
22
- :alt="post.main_image_url"
41
+ :alt="post.post_sub2_image_filename"
23
- >
42
+ >
24
- </a>
43
+ </a>
44
+ <figcaption>{{ post.sub1_image_title }}</figcaption>
25
- </figure>
45
+ </figure>
46
+
47
+
48
+ <figure>
26
- <ImageLightBox :media="media" ref="lightbox" :show-light-box="false" :show-caption="true"></ImageLightBox>
49
+ <a class="img-box img320" @click.prevent.stop="show(2)">
50
+ <img
51
+ :src="post.post_sub2_image_url"
52
+ :alt="post.post_sub2_image_filename"
53
+ >
54
+ </a>
55
+ <figcaption>{{ post.sub2_image_title }}</figcaption>
56
+ </figure>
57
+
27
58
  </div>
28
59
  </template>
29
-
30
60
  <script>
31
61
  import ImageLightBox from 'vue-image-lightbox';
32
62
 
@@ -40,52 +70,72 @@
40
70
 
41
71
  data() {
42
72
  return {
73
+ post_id: this.$route.params.post_id,
43
74
  post: {},
44
75
  post_main_image_url: '',
76
+ post_sub1_image_url: '',
77
+ post_sub2_image_url: '',
78
+
45
79
  media: [
46
80
  {
47
- // src: "/uploads/1" とするとうまくいく
81
+ // src: "/uploads/1"とするとうまくいく
48
82
  thumb: this.post_main_image_url,
49
83
  src: this.post_main_image_url,
50
- title: '朝日が昇る摩周湖(北海道川上郡弟子屈町)',
84
+ id: 1
51
85
  },
86
+ {
87
+ thumb: this.post_sub1_image_url,
88
+ src: this.post_sub1_image_url,
89
+ id: 2
90
+ },
91
+ {
92
+ thumb: this.post_sub2_image_url,
93
+ src: this.post_sub2_image_url,
94
+ id: 3
95
+ }
52
96
  ],
53
97
  }
54
98
  },
55
99
 
100
+
56
101
  methods: {
57
- show: function(index){
102
+ show: function (index) {
58
103
  this.$refs.lightbox.showImage(index)
59
104
  },
60
- // データ取得
105
+
61
- getData() {
106
+ getPost() {
62
107
  this.$loading.load(
63
108
  this.$auth.api.get(
64
- 'posts/' + this.post_id, {
109
+ 'su/posts/' + this.post_id, {
65
110
  params: {}
66
111
  }
67
112
  ).then(res => {
68
113
  this.post = res.data.post;
69
114
 
70
- let mainImageUrl = res.data.post.main_image_url;
115
+ this.post_main_image_url = res.data.post.post_main_image_url;
116
+ this.post_sub1_image_url = res.data.post.post_sub1_image_url;
117
+ this.post_sub2_image_url = res.data.post.post_sub2_image_url;
71
- console.log(mainImageUrl)
118
+ console.log(this.post_main_image_url)
119
+ console.log(this.post_sub1_image_url)
120
+ console.log(this.post_sub2_image_url)
72
- // =>/uploads/1
121
+ // /uploads/1
73
- let stringMainImageUrl = String(mainImageUrl)
74
- console.log(stringMainImageUrl)
75
- // =>/uploads/1
76
- this.post_main_image_url = stringMainImageUrl
77
- console.log(String(this.post_main_image_url))
78
- // =>/uploads/1
79
122
  }).catch(err => {
80
123
  this.$errorHandlers.initial(err);
81
124
  })
82
125
  )
83
- }
126
+ },
84
127
 
128
+
85
- }
129
+ },
130
+
131
+
132
+ // インスタンス生成後、リアクティブデータ初期化後
86
133
  created() {
87
- this.getData();
134
+ this.getPost();
88
135
  },
136
+
137
+
89
138
  }
139
+
90
140
  </script>
91
141
  ```

2

修正

2021/10/21 08:37

投稿

katahik
katahik

スコア79

title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,6 @@
13
13
  皆様の知恵をお貸しいただければと思います。
14
14
 
15
15
  ```
16
-
17
16
  <template>
18
17
  <div>
19
18
  <figure class="mr-3">
@@ -45,7 +44,7 @@
45
44
  post_main_image_url: '',
46
45
  media: [
47
46
  {
48
- // src: "/uploads/1"とするとうまくいく
47
+ // src: "/uploads/1" とするとうまくいく
49
48
  thumb: this.post_main_image_url,
50
49
  src: this.post_main_image_url,
51
50
  title: '朝日が昇る摩周湖(北海道川上郡弟子屈町)',
@@ -53,8 +52,12 @@
53
52
  ],
54
53
  }
55
54
  },
55
+
56
56
  methods: {
57
+ show: function(index){
58
+ this.$refs.lightbox.showImage(index)
59
+ },
57
- // データ取得処理
60
+ // データ取得
58
61
  getData() {
59
62
  this.$loading.load(
60
63
  this.$auth.api.get(
@@ -78,7 +81,11 @@
78
81
  })
79
82
  )
80
83
  }
84
+
81
85
  }
86
+ created() {
87
+ this.getData();
88
+ },
82
89
  }
83
90
  </script>
84
91
  ```

1

修正

2021/10/21 05:53

投稿

katahik
katahik

スコア79

title CHANGED
File without changes
body CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  ![![イメージ説明](1801e113dccbba8fe019ecad57b8d25c.png)]
4
4
 
5
- しかし、今、サンプルで静的srcを記載することで画像をスライダーにしているので、srcを動的にして画像を変更したい思っています。
5
+ しかし、今、サンプルで静的なsrcを記載して画像をスライダーにしているので、このsrcを動的なもの変更して、それに合わせた画像を表示させたい思っています。
6
6
 
7
7
  そこで、下記のとおり、コードを記述しましたが、imgのsrcがundefindになっており、画像が表示されません。
8
8
  ![![イメージ説明](6a176aeeef3a94a032d60e3d601551f2.png)]
9
9
 
10
10
  ここに /uploads/1 を格納したはずが、undefindになっております。
11
- なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。
11
+ **なのでsrcとthumbに /uploads/1 を格納する方法を教えていただければと思います。**
12
12
 
13
13
  皆様の知恵をお貸しいただければと思います。
14
14