# URLを特定のスペース欄に画像表示させる方法 **URL:** \ **Category:** kintone 開発相談\ **Created:** [2018 年 8 月 1 日午前 11:31 UTC](https://community.cybozu.dev/t/topic/3246 "2018-08-01T11:31:20Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Legacy\_Account784](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Legacy\_Account784](https://community.cybozu.dev/u/Legacy_Account784)\ **Post date:** [2018 年 8 月 1 日午前 11:31 UTC](https://community.cybozu.dev/t/topic/3246/1 "2018-08-01T11:31:20Z")
レコードごとに別々の画像を表示させたいのですが、添付ファイルとして追加するのではなく、画像URL（[http://～](http://xn--gj7c),jpg)をサムネイル表示させる為にはどのようなJavascriptが必要でしょうか？   URLを入力したい文字列1行フィールドコード：「文字列」 上記のURL画像をサムネイルで表示させたいスペースの要素ID：「space」   また、画像は500ピクセルの正方形に収めたいと考えております。 ご教授宜しくお願い致します。 ---
**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\ **Post date:** [2018 年 8 月 10 日午前 5:34 UTC](https://community.cybozu.dev/t/topic/3246/2 "2018-08-10T05:34:02Z")
こんにちは。 レコードに画像のURLを入力し、詳細画面で対象の画像をスペースに表示したいという認識であっていますかね？ であれば、下記のような感じで、入力したURLから画像情報を作って、スペースに入れれば表示されます。 ``` kintone.events.on("app.record.detail.show", function(e) { var url = e.record.文字列.value; var image = document.createElement('img'); image.src = url; kintone.app.record.getSpaceElement('space').appendChild(image); }); ```   ---
**Author:** ![Legacy\_Account784](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Legacy\_Account784](https://community.cybozu.dev/u/Legacy_Account784)\ **Post date:** [2018 年 8 月 10 日午後 5:13 UTC](https://community.cybozu.dev/t/topic/3246/3 "2018-08-10T17:13:57Z")
サクラエビ様   ありがとうございます！ あっさり出来上がりました。   ちなみに追加でご質問よろしいでしょうか？   最初にしたご相談は「文字列（URL）」が一つでしたが、仮にこの文字列が複数ある場合 一つのスペース(もしくは複数のスペースでも構いませんが）に画像を表示しようとすると どのように構成すればよろしいでしょうか？   宜しくお願い致します。   ---
**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\ **Post date:** [2018 年 8 月 13 日午前 4:28 UTC](https://community.cybozu.dev/t/topic/3246/4 "2018-08-13T04:28:36Z")
大ちゃん 無事できてよかったです。 文字列が複数というのが、単純に複数配置しているのか、テーブルになっているのかで、コードの記載が 若干変わりますが、同じ要領でスペースに対して要素足していけば、複数の画像が表示されます。 変数は使いまわしてもいいですが、見やすい形にしているので、お好みで修正くだしさい。   ``` kintone.events.on("app.record.detail.show", function(e) { //1枚目 var url = e.record.文字列.value; var image = document.createElement('img'); image.src = url; kintone.app.record.getSpaceElement('space').appendChild(image); //2枚目 フィールドコードは文字列2 var url2 = e.record.文字列2.value; var image2 = document.createElement('img'); image2.src = url2; kintone.app.record.getSpaceElement('space').appendChild(image); }); ``` ---
**Author:** ![Legacy\_Account784](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Legacy\_Account784](https://community.cybozu.dev/u/Legacy_Account784)\ **Post date:** [2018 年 8 月 13 日午前 7:54 UTC](https://community.cybozu.dev/t/topic/3246/5 "2018-08-13T07:54:06Z")
サクラエビ様 ありがとうございます。 早速試させていただきましたが、うまく2枚目以降の画像が表示されません。   上記のコードに併せて ・写真を表示させる要素ID：space ・URLを入れている文字列：複数配置しました（文字列、文字列2）   画像が「1枚目」しか表示されず、念のためurlを入れ替えてみたりしましたが、「2枚目」が表示されることはありませんでした。 どういう原因が考えられますでしょうか？ ---
**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\ **Post date:** [2018 年 8 月 16 日午前 12:42 UTC](https://community.cybozu.dev/t/topic/3246/6 "2018-08-16T00:42:22Z")
大ちゃん すみません。貼ったコードの2枚目の描写処理のところの変数名が間違っていますね。 11行目 誤 kintone.app.record.getSpaceElement(‘space’).appendChild(image); ``` 正 kintone.app.record.getSpaceElement('space').appendChild(image2); ``` 2枚目を image2 として作成しているので、image ではなく、image2 です。 多分このせいで、1枚目だけ表示されてしまっていたかと。。。 ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\ **Post date:** [2024 年 9 月 9 日午前 6:18 UTC](https://community.cybozu.dev/t/topic/3246/7 "2024-09-09T06:18:18Z")
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。