vue + webpack projesi img, statik src'yi yükleyemiyor

Question

Benim vue (2.0) + webpack projesinde, vue-html-loader'ı yapıyorum, ancak .vue dosyalarında img etiketi statik src görüntülerini yükleyemiyor.

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

Tarayıcım hep 404 hatası çıkıp:

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' 
    } 
}, 

Aşağıda benim .vue dosyasıdır: Aşağıda benim webpack yapılandırma olduğunu. Birisi aynı problemi mi aldı?

Answer 1

Benim için çalışan benim webpack geneli, aşağıdaki adres:

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]' 
     } 
     } 
    ] 
    } 

Ben herhangi bir özel ayar yapmadan erişebilir ve gösterge olabilir src/assets klasördeki görüntüler var.

Ben senin webpack takma adlarına içinde statik img dizinin bir takma ad eklersiniz

Answer 2

, yani şimdi

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

sen yani ~img aracılığıyla statik görüntüleri başvurabilir

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

---

sağlamak Yukarıdaki html içinde ayrıştırabilirsiniz, vue-html yükleyicinizi webpack yapılandırmanıza eklemeniz gerekir:

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

Sadece mevcut html yükleyicinizi yukarıdaki ile değiştiririm.

Ancak tüm bu kenara - Ben strongely yüklemek öneriyoruz nedeniyle sağlam webpack vue uygulamasını iskele karmaşıklığınavue-cli: https://github.com/vuejs/vue-cli

Sonra sadece bir test edilmiş ve işleyişini dönebilirsiniz webpack çevre:

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

Basitçe içine başvurunuzu kopyalayın. Muhtemelen bir miktar refactoring yapmak zorunda kalacaksınız ama kurulumda zaman tasarrufu kesinlikle buna değer.