はじめに
どうも、コピペ作業を自動化したら、コードミスって最悪なことになった人です。
この記事では、Vue.jsで画像を使用しようとすると出てきたエラーに関して紹介していきます。
解決した理由がわかっていません。
わかる方、コメントで教えて下さい。
解決したかったこと
Vue.js上で画像を表示
画像は、僕の愛用一眼レフくんで撮った写真。
発生していた問題・エラー
ERROR Failed to compile with 1 error
error in ./src/assets/img/1.PNG
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
使おうとしていた画像を:srcに入れると、このエラーが出てきた。
該当するソースコード
<v-img
:src="require('@/assets/img/1.PNG')"
contain
height="200"
></v-img>
すでにテンプレートとしてassetsフォルダの中に入っていた画像は使えた。
しかし、自分で撮影した写真は使えなかった。
自分で試したこと
を見ろと書いてあったので、ここを見た。
でも、websocketを使わないvueを使っていたから、どうしていいか一切わからなかった。
解決への道
文字コードを使った問題を解いたとき、「�」←これを見たことがあり、撮影した画像のデータに「日本語」が入ってるのが悪いのかと思った。
そこで、画像を【オンライン画像コンバーター】で変換してみた。
変換してみた理由は、画像だけを変換し、内部データは引き継がないと考えたからだ。
元の画像の拡張子がpngだったから、jpgに変換してみた。
結果
画像がエラー無しで表示された！！！
なんで？？？
結論
Module parse failed: Unexpected character '�' (1:0)
画像を使おうとして、こんなエラーが出てきたら、一度、画像変換してみよう。
最後に
理由分かる人がいたら、コメントで教えて下さい。