質問: ### 発生している問題・エラーメッセージ ![](https://teratail.storage.googleapis.com/uploads/contributed_images/2ee8ef8a5a223fd071fa15b7600e2244.png) * (左側)問題なく画像が表示されるコード ``` ``` * (右側)画像が404になるコード ``` ``` エラーコード、エラーメッセージが無く、 webpack + Vue.js を初めて10時間前後な事もあり、どのようにすれば解決するか分かりません。 ### 試したこと * 画像があるはずのURLに直接アクセスする → 404になった * 問題なく画像が表示されている方のURLがどうなっているかを確認した → URLではなく、base64エンコードされた画像が指定されていた (HTMLでは上記のように相対パスしているが、WEBブラウザで確認するとbase64に自動的に変換されていた) * `my-project-name/src/assets/characters/icon/1.png` にファイルが有るかどうかのチェック → 間違いなくある。 ![](https://teratail.storage.googleapis.com/uploads/contributed_images/7829873bc160479726a639f457aa8081.png) ### 開発環境 * Windows 10 64bit * webpack 3.3.0 * Vue.js 2.8.2 * 開発環境インストール方法 ``` $ npm install -g vue-cli $ vue init webpack my-project-name $ cd my-project-name $ npm run dev ```
回答: `require()` すると画像の読み込みに成功しました。 ``` ``` また、画像のアクセス先のURLは`http://127.0.0.1:8080/static/img/1.93f1f24.png`となっていました。 このURLは`webpack.base.conf.js`に書かれている以下の条件から自動生成されたURLかと思います。 ``` { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ``` 何故`require`が必要なのかはよく分かっていませんが、自己解決とさせて頂きます。。。