画像の相対パスが必要な場合、表示できる画像と表示できない画像があります。

 let img = require(`../assets/images/index/icon_ku.png`)
 let img2 = require(`../assets/images/index/icon_DB2.png`)
 console.log(img) // 结果：/img/icon_ku.b259504f.png
 console.log(img2) // 结果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7nag2AAAAAXNSR0IArs4c6QAADBFJREFUaN7VmXlUVPcVx6dNNEvTNqlpzVZ7upw0nqRH08TYJGpcqMYtKAi4K25VE7ckrTUxwbiCIAKKsinIsDmKSlTcN1wxKpjgvjAwwLDNW2afgZlv733jYNSYP0ak4XfOPW9+v2F49/Pu9vvdp1LdNSaky+nj1bJ7fLqEV

エンコード処理中に、同じ参照方法でも正常に表示できるピクチャと正常に表示できないピクチャがあることが判明しました。

対応する結果を出力した後、2 つの結果は異なっており、一部は Base64 に変換され、一部は変換されないことがわかりました。

Base64に変換すると正常に表示できません。

調べてみると、requireというのはノードをモジュール化するための仕様で、requireでピクチャをインポートすればbase64にコンパイルできるのでパスの問題はないのですが、問題はbase64に変換する際のサイズ制限があることです。これは、webpack の「.base.config.js のサイズ制限の変更」にあります。ただし、私の要件は、base64 に変換する必要がないことなので、画像のサイズを比較したところ、次の図に示すように、「ku」の方が「DB2」より 1 kb 大きいことがわかりました。

 そこで、より大きな画像を再カットする UI を見つけて、「DB2」を 6KB の画像に置き換えたところ、結果は正常に表示され、問題は解決されました。