はじめに

どうも、コピペ作業を自動化したら、コードミスって最悪なことになった人です。

この記事では、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)

画像を使おうとして、こんなエラーが出てきたら、一度、画像変換してみよう。

最後に

理由分かる人がいたら、コメントで教えて下さい。