Angular2 (vaadin angular2-polymer): Как обращать внимание на изображения

Question

У меня есть проект angular2/webpack, который использует полимерные элементы. Я использую следующий элемент:

<paper-card image="img/home.jpg"> 

в моей родной компонент:

• дома
  • IMG
    • home.jpg
  • home.component .ts

У меня есть следующие конфигурации: WebPack

var webpack = require('webpack'); 

module.exports = { 
devtool: 'cheap-module-eval-source-map', 

output: { 
    path: './public/js/app', 
    publicPath: "/js/app/", 
    filename: 'bundle.js', 
    chunkFilename: '[id].chunk.js' 
}, 
entry: { 
    'app': './assets/app/main.polymer.ts' 
}, 

resolve: { 
    extensions: ['.js', '.ts'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
       'awesome-typescript-loader', 
       'angular2-template-loader', 
       'angular2-router-loader' 
      ] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html' 
     }, 
     { 
      test: /\.css$/, 
      loader: 'raw' 
     } 
    ] 
}, 

plugins: [ 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     './src' // location of your src 
    ) 
] 
}; 

приложение получает загружен правильно & я угловые/полимерные компоненты неоспоримым отображения. Таким образом, база настроена правильно. Но когда я смотрю на элемент бумажной карточки, я не вижу в нем изображения. Я также вижу в инструментах dev, что изображение никогда не подается.

Что мне нужно изменить, чтобы изображение отображалось правильно? Вероятно, веб-пакет конфигурации?

Answer 1

Это определенно что-то не так с нашей настройкой проекта, либо структура папки неправильная, либо что-то не хватает в конфигурации webpack.

Насколько я могу судить, в вашей конфигурации webpack нет никакого загрузчика, ориентированного на файлы изображений. Я думаю, вот что происходит сейчас:

• Веб-сайт не знает, как обрабатывать ваше изображение, и, следовательно, он его не обрабатывает.
• URL-адрес изображения поступает в браузер без изменений.
• Затем браузер запрашивает изображение из выходного открытого пути, но его нет, поскольку он находится рядом с файлом компонента в пути источника приложения.

В принципе, у вас есть два варианта:

• Продолжить без обработки WebPack для изображений. Вы можете напрямую перемещать изображение в общей папке, поэтому оно подается непосредственно оттуда, его URL-адрес является постоянным, а webpack не касается файла изображения и не изменяет URL-адрес.

• В качестве альтернативы вы можете сохранить свое изображение в исходном пути приложения, рядом с файлом компонента. Для этого необходимо расширить WebPack конфигурации и загрузчик для файлов изображений, например, с помощью file-loader:

  loaders: [ 
      /* ... */ 
      { 
      test: /\.(jpe?g|png|gif|svg)/i, 
      loader: 'file' 
      } 
  ] 
  

  Таким образом, WebPack загружает изображение, а затем копирует («излучает») в папку вывода, затем изменяет путь, ссылающийся на это изображение, на путь выходного файла.

Answer 2

Просто нужно добавить в WebPack конфигурации:

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     // test: /\.xxx$/, // may apply this only for some modules 
     options: { 
      htmlLoader: { 
       attrs: ['paper-card:image'] 
      } 
     } 
    }) 
]