フロントエンドかバックエンドか、それが問題だ

vue-cli webpack で作成したプロジェクトでは、 img タグの src 属性に指定した画像URL（パス）は Base64エンコードされて出力されます。 < template > < img src = "../../assets/test.png" > </ template > < img src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEC..." > このように展開される。 がしかし src を v-bind によって変数バインドさせた場合はそのままパス文字列が出力されてしまうのです。 < template > < img :src = "image_src" > </ template > < script > export default { data () { return { image_src: "../../assets/test.png" } } } </ script > < img src = "../../assets/test.png" > 当然、画像は表示されない。(publicではないので) vue-loader公式に書いてあった アセット URL ハンドリング · vue-loader < img src = "../image.png" > コレは、 createElement( 'img' , { attrs: { src: require ( '../image.png' ) }}) こういう形にコンパイルされるらしい。 require() で画像を依存ファイルとして読み込んでいるようです。 解決 < template > < img :src = "

最近、「 ユースケース駆動開発実践ガイド 」を読みつつ実践してるのだが、ドメインモデル・ユースケース図・ロバストネス図などを何で作るか悩んでいる。 ふと、「PlantUML」なるものがあったと思いだしたので、試しに使ってみた。 PlantUMLとは？ http://plantuml.com/ テキストのみでUMLの図を書くためのツール。最近だとテキストでフローチャートやシーケンス図が掛ける「 mermaid.js 」が話題にあがることもあったが、それよりももっと前からある 元祖テキスト作図ツール といえる。（wikiによると2009年4月17日が初版リリースだそう） インストール Macの人はbrewで入れられる。 $ brew install graphviz $ brew install plantuml Windowsな人はJavaの環境入れて graphviz と plantuml を個別でインストールする必要があるのかな。 まずは実行 Vim等のテキストエディタで以下をコピペし保存。 test.uml みたいな感じで。 @startuml usecase 購読者がニュース一覧を閲覧する actor 購読者 boundary ニュース一覧画面 control 一覧取得 entity ニュース一覧 購読者 --> ニュース一覧画面 : アクセス ニュース一覧画面 --> 一覧取得 : 呼び出し 一覧取得 --> ニュース一覧 : 問い合わせ @enduml そして実行。 $ plantuml test.uml いい感じですね。 vscodeで書く vscodeこと「Visual Studio Code」ではプラグインを入れる事でUMLのリアルタイムレンダリングを行ってくれる。 vscodeの「拡張機能」の検索窓に「plantuml」を入れるとトップにできくるのでインストール→再読込 いい感じ。 しばらく使ってみる PlantUMLにロバストネス図のElementまで用意されてるとは思わなくて興奮した勢いで書いてみました。 とりあえず環境は整えたので、いまモデリングで使ってる draw.io と比べてどうなのか図るべく使っていこうと思