デザイン変更しました
デザイン変更のテストも含めた投稿です！
このブログもかなり放置だったので、これからまたアウトプットしていこうかと思います。
最近だと社内でGo言語やVue.jsを使ったWEBアプリケーションの開発など、最新技術スタックで仕事が出来るという恵まれた環境におりますので、ネタはある（はず）なのですね。笑
Vue.jsでimgタグのsrcをバインドさせる際の注意点
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 = "
