vis.jsでの画像入りタイムラインの作成

前提

JavaScriptで画像入りのタイムラインを作っています。
ライブラリはvis.jsを使用しています

もしこれ以外に簡単なやり方がある場合はぜひ教えていただけると幸いです。

発生している問題・エラーメッセージ

下記のコードだとこのような表示になってしまい画像が表示されません

該当のソースコード

Javascript
1  <body>   
2    <div id="visualization"></div>
3    <script type="text/javascript">
4        // DOM element where the Timeline will be attached
5        var container = document.getElementById('visualization');
6
7        const getContent = (title, img) => {
8          const item = document.createElement('div');
9          const name = document.createElement('div');
10          const nameClasses = ['fw-bolder', 'mb-2'];
11          name.classList.add(...nameClasses);
12          name.innerHTML = title;
13
14          const image = document.createElement('img');
15          image.setAttribute('src', img);
16
17          const symbol = document.createElement('div');
18          const symbolClasses = ['symbol', 'symbol-circle', 'symbol-30'];
19          symbol.classList.add(...symbolClasses);
20          symbol.appendChild(image);
21
22          item.appendChild(name);
23          item.appendChild(symbol);
24
25          return item;
26        }
27        // Create a DataSet (allows two way data-binding)
28        var items = new vis.DataSet([
29          {id: 1, content: 'item 1', start: '2014-04-20'},
30          {id: 2, content: 'item 2', start: '2014-04-14'},
31          {id: 3, content: 'item 3', start: '2014-04-18'},
32          {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
33          {id: 5, content: 'item 5', start: '2014-04-25'},
34          {id: 6, content: getContent('C:/Users/zz/Pictures/IMG_6519.JPG'), start: '2014-04-27'}
35        ]);
36        // Configuration for the Timeline
37        var options = {
38          margin: {
39            item: 20,
40            axis: 40
41          }
42        };
43      
44        // Create a Timeline
45        var timeline = new vis.Timeline(container, items, options);
46    </script>
47  </body>

試したこと

公式のサンプルの方法も試しましたができませんでした

行動規範の内容に同意します

回答2件

自己解決

ライブラリが画像を読み込まないものになっていた

投稿2023/01/02 12:42

Arthur11

総合スコア10

サンプルを見るとイメージタグを使うやり方が出てきますがどうなんでしょう。こちらでは動きました。

content: '<img src="C:/Users/zz/Pictures/IMG_6519.JPG">'

https://visjs.github.io/vis-timeline/examples/timeline/
https://visjs.github.io/vis-timeline/examples/timeline/styling/customCss.html

投稿2023/01/02 02:08

yuma.inaura

総合スコア1453

Arthur11

2023/01/02 12:09

ご回答ありがとうございます。 <body> <div id="visualization"></div> <script type="text/javascript"> var container = document.getElementById('visualization'); var items = new vis.DataSet([ {id: 1, content: 'item 1', start: '2014-04-20'}, {id: 2, content: 'item 2', start: '2014-04-14'}, {id: 3, content: 'item 3', start: '2014-04-18'}, {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'}, {id: 5, content: 'item 5', start: '2014-04-25'}, {id: 6, content: '<img src="C:/Users/zz/Pictures/IMG_6519.JPG">', start: '2014-04-27'} ]); // Configuration for the Timeline var options = { margin: { item: 20, axis: 40 } }; var timeline = new vis.Timeline(container, items, options); </script> </body> このコードでやってみたのですがうまく行かないです。

行動規範の内容に同意します

あなたの回答