質問: HTML5+SpringBootで勉強をしています。 HTMLからjavasript側に以下のようにデータを渡しています。 ``` th:onclick="|show('${test.data1}', '${test.data2}');| ``` 渡すデータが小さい場合特に問題なく値がわたっているのですが、 (jsファイルにブレイクを張って確認できました) 画像データのようにサイズが大きな場合、以下のようなエラーが出てしまいます。 大きなデータをjavascript側に渡す方法は何かありますでしょうか。 ``` SyntaxError: unterminated string literal ``` 〇jsファイル ``` function show(data1, data2) { } ```
回答: `画像データのようにサイズが大きな`ファイルを参照する場合、HTMLに埋め込んでしまうと(JavaScriptにせよ、HTMLにせよ、Base64にせよ)ページ全体の読み込みが遅れてしまうため、**別ファイル、またはAPIを用意し、そちらへの参照を渡すようにする**のが一般的な構成だと考えます。 また、蛇足ですが `SyntaxError: unterminated string literal` は以下のいずれかが原因のエラーであり、サイズの問題ではなさそうです。 > > このエラーを修正するためには、次の点をチェックしてください: > > > * 文字列リテラルのために、クオート(シングルかダブル)の開始と終了を行っている。 > * 文字列リテラルを正しくエスケープしている。 > * 文字列リテラルが複数行に分けられていない。 > > > > > >