Загрузка изображений ng-src с помощью webpack

Question

Я загружаю изображение с угловым, например.

<img ng-src="{{::path-to-image}}"/> 

Когда я связать мое приложение с WebPack URL-адрес изображения разрешен во время выполнения, таким образом, не в комплекте погрузчиками WebPack в.

Это загрузчик изображений Я использую:

{ 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loader: 'url?limit=8192!img' 
    } 

Как WebPack может связать эти образы решены во время выполнения?

Answer 1

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

Написать функцию в контроллере:

$scope.loadImage = function(image) { 
    return require('/images/' + image); 
}; 

и использовать его в нг-Src:

<img ng-src="{{loadImage('myImage')}}" /> 

После этого сделать динамический требует работы вы можете использовать context.

Например: https://github.com/webpack/webpack/tree/master/examples/require.context#examplejs

Answer 2

Если вам нужен путь изображения, который программно сгенерирован, это означает, что у вас есть логика, ожидающая, что это изображение будет существовать. Другими словами, вы должны рассматривать этот образ как зависимость от этой части логики, поэтому вам нужно явно ее требовать.

В коде JS (например: контроллер)

this.imageUrl = require('path-to-image' + someDynamicValue + '.jpg'); 

В шаблоне:

<img ng-src="{{::myCtrl.imageUrl}}"/> 

Webpack достаточно умен, чтобы понять динамический require заявление и связать изображения, которые будут соответствовать, что выражение , Посмотрите документацию для получения более подробной информации: https://webpack.github.io/docs/context.html)

Answer 3

Я создал uiImage директиву, которая requires изображения.

function uiImage() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
     var src = attr.uiImage || attr.src; 

     function loadImage(image) { 
      return require(`Images/${image}`); 
     } 

     // required for webpack to pick up image 
     element.attr('src', loadImage(src)); 
     } 
    }; 
    } 

    uiImage.$inject = []; 
    export default uiImage; 

Использование:

<img ui-image='myimage.png' /> 

webpack.config.js

У меня есть Webpack решить Images, который указывает на расположение всех моих изображений.

resolve: { 
    alias: { 
    'Images': path.join(config.appDir, '/images') 
    } 
} 

Answer 4

мне нужно динамически разрешить изображения во время выполнения с хешами, генерируемого WebPack, например, imgA.bd79a5ba.png.

{ 
    test: /\.png$/, 
    loader: 'file-loader?name=images/[name].[hash].[ext]', 
} 

Я в конечном итоге создать модуль для псевдонима и требует изображения:

let map = { 
    'imgA': require('./images/imgA.png'), 
    'imgB': require('./images/imgB.png'), 
    'imgC': require('./images/imgC.png') 
} 

Это создает карту:

{ 
    'imgA': imgA.bd79a5ba.png, 
    'imgB': imgB.e51f66a2.png, 
    'imgC': imgC.d84ae37c.png 
} 

В моем компоненте я решил URL-адрес с карты:

self.link = function link(scope) { 
    scope.imageUrl = function(name) { 
    function return map[name]; 
    } 
}; 

Это был для загрузки изображения:

<img ng-src="{{ imageUrl('imgA') }}"> 

Вышеприведенное упрощено. Я нашел, что это полезно для создания модуля для карты:

export default { 
    'imgA': require('./images/imgA.png'), 
    'imgB': require('./images/imgB.png'), 
    'imgC': require('./images/imgC.png') 
} 

затем импортировать его в компонент модуля:

import urlMap from './imageUrlMap' 
console.log(urlMap.imgA) 

> imgA.bd79a5ba.png