vue + webpack dự án img không thể tải tĩnh src

Question

Trong dự án webue vue (2.0) + của tôi, tôi cấu hình vue-html-loader, nhưng trong tệp .vue img của tôi không thể tải hình ảnh src tĩnh. Dưới đây là cấu hình webpack của tôi:

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

Dưới đây là tập tin .vue tôi:

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

Trình duyệt của tôi luôn luôn đi ra lỗi 404. Có ai đó có cùng một vấn đề không?

Answer 1

Tôi đã sau trong cấu hình webpack của tôi, mà làm việc cho tôi:

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

tôi có hình ảnh trong thư mục src/assets mà tôi có thể truy cập và hiển thị mà không cần bất kỳ thiết lập cụ thể.

Answer 2

Tôi muốn thêm một bí danh cho thư mục img tĩnh của bạn trong vòng bí danh webpack của bạn, ví dụ:

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

bây giờ bạn có thể tham khảo hình ảnh tĩnh thông qua ~img, tức là

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

---

Để đảm bảo bạn có thể phân tích cú pháp bên trên trong html của mình, bạn cần phải thêm trình tải vue-html vào cấu hình webpack của mình:

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

Tôi sẽ chỉ thay thế trình tải html hiện tại của bạn bằng cách ở trên.

Tuy nhiên tất cả điều này sang một bên - do sự phức tạp của giàn giáo một ứng dụng webpack vue rắn Tôi muốn strongely khuyên bạn nên cài đặt các vue-cli: https://github.com/vuejs/vue-cli

Sau đó, bạn chỉ có thể tung ra một thử nghiệm và chức năng webpack môi trường:

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

Chỉ cần sao chép đơn đăng ký của bạn vào môi trường đó. Bạn có thể sẽ phải làm một chút refactoring nhưng thời gian tiết kiệm trên thiết lập là hoàn toàn giá trị nó.