vue + webpackプロジェクトimgは静的なsrcをロードできません

Question

私のvue（2.0）+ webpackプロジェクトでは、私はvue-html-loaderを設定しますが、私の.vueファイルでimgタグは静的なsrcイメージを読み込めません。

<img src="/web/img/sieleLogo@1x.png" srcset="/web/img/sieleLogo@2x.png" /> 

私のブラウザは常に404エラーが出てくる：

module: { 
    loaders: [ 
     ... 
     { 
      test: /\.html$/, 
      exclude: /node_modules/, 
      loaders: ['html', 'html-minify'] 
     } 
     , { 
      test: /\.vue$/, 
      loader: 'vue' 
     } 
     ... 
    ] 
}, 
vue: { 
    ... 
    html: { 
     root: path.resolve(__dirname, './source/static'), 
     attrs: ['img:src', 'img:srcset'] 
    }, 
    loaders: { 
     css: ExtractTextPlugin.extract("css"), 
     sass: ExtractTextPlugin.extract("css!sass") 
    } 
}, 
resolve: { 
    root: [ 
     path.resolve('./source') 
    ], 
    extensions: ['', '.js', '.json', '.scss', '.html', '.css', '.vue'], 
    alias: { 
     'vue': 'vue/dist/vue.js' 
    } 
}, 

以下は私の.vueファイルです： は、以下の私のWebPACKの設定です。誰かが同じ問題を抱えましたか？

Answer 1

私は私のために働く私のWebPACKの設定で次のようしている：

module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     options: vueConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'url', 
     options: { 
      limit: 10000, 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    } 

私は任意の特定の設定せずにアクセスして表示することができますsrc/assetsフォルダ内の画像を持っています。

Answer 2

私は今あなたがすなわち

<img src="~img/sieleLogo@1x.png" srcset="~img/sieleLogo@2x.png" /> 

---

確保するために、~imgを経由して静止画像を参照することができ、すなわち

resolve: { 
    ... 
    alias: { 
    'vue': 'vue/dist/vue.js', 
    'img': path.resolve(__dirname, '../web/img') // or wherever it is located relative to this file 
    } 
} 

、あなたのWebPACKのエイリアス内の静的imgディレクトリのエイリアスを追加したいですhtml内で上記を解析することができます。vue-htmlローダーをウェブパックの設定に追加する必要があります：

module: { 
    loaders: [ 
    ... 
    { 
     test: /\.html$/, 
     loaders: 'vue-html' 
    } 

私はあなたの現在のHTMLローダーを上記のものに置き換えます。

しかし、このすべてはさておき - 私はstrongelyインストールをお勧めしたいため、固体のWebPACKのVUEのアプリケーションを足場の複雑さにVUE-CLI：https://github.com/vuejs/vue-cli

が次にあなたは、単にテストと機能をロールアウトすることができますWebPACKの環境：

https://github.com/vuejs-templates/webpack

は、単にそれにアプリケーションをコピーします。おそらくリファクタリングを少ししなければならないでしょうが、セットアップの時間を節約することは絶対に価値があります。