On each iteration, mark failed images with an inline attribute to kee…

…p processing the HTML and then restore the flags back

index.js

@@ -266,7 +266,14 @@ class HtmlWebpackInlineSVGPlugin {
  // process the imageNodes
 
  this.updateHTML(html, inlineImages)
- .then((html) => resolve(html))
+ .then((html) => {
+ if (!this.allowFromUrl) {
+ resolve(html)
+ }
+
+ const newHtml = html.replace(/failed /gi, '')
+ resolve(newHtml)
+ })
  .catch((err) => {
 
  console.log(chalk.underline.red('processImages hit error'))
@@ -408,12 +415,20 @@ class HtmlWebpackInlineSVGPlugin {
  */
  isNodeValidInlineImage (node) {
 
- return !!(
- node.nodeName === 'img'
- && ((this.inlineAll && _.filter(node.attrs, { name: 'inline-exclude' }).length === 0)
- || _.filter(node.attrs, { name: 'inline' }).length)
- && this.getImagesSrc(node))
+ const isInlineAllAndDoesNotHaveInlineExclude = (
+ this.inlineAll &&
+ _.filter(node.attrs, { name: 'inline-exclude' }).length === 0
+ )
+ const isInlineNotMarkedAsFailed = (
+ _.filter(node.attrs, { name: 'inline' }).length &&
+ !_.filter(node.attrs, { name: 'failed' }).length
+ )
 
+ return !!(
+ node.nodeName === 'img' &&
+ (isInlineAllAndDoesNotHaveInlineExclude || isInlineNotMarkedAsFailed) &&
+ this.getImagesSrc(node)
+ )
 
  }
 
@@ -428,7 +443,6 @@ class HtmlWebpackInlineSVGPlugin {
 
  const svgSrcObject = _.find(inlineImage.attrs, { name: 'src' })
 
-
  // image does not have a src attribute
 
  if (!svgSrcObject) return ''
@@ -493,36 +507,45 @@ class HtmlWebpackInlineSVGPlugin {
  *
  */
  processOutputHtml (html, inlineImage) {
+
  return new Promise((resolve, reject) => {
 
  const svgSrc = this.getImagesSrc(inlineImage)
 
+
  // if the image isn't valid resolve
  if (!svgSrc) return resolve(html)
 
  // read in the svg
  fs.readFile(path.resolve(this.outputPath, svgSrc), 'utf8', (err, data) => {
- if (err) {
- // loading from the filesystem failed
- if (!this.allowFromUrl) {
- return reject(err)
- }
-
- axios.get(svgSrc)
- .then(({ status, data }) => {
- if (!status === 200) {
- resolve(html)
- return
- }
-
- this.optimizeSvg({ html, inlineImage, svgSrc, data, resolve })
- })
- .catch(() => resolve(html))
+ if (!err) {
+ this.optimizeSvg({ html, inlineImage, data, resolve })
+ return
+ }
 
+ // loading from the filesystem failed
+ if (!this.allowFromUrl) {
+ reject(err)
  return
  }
 
- this.optimizeSvg({ html, inlineImage, data, resolve })
+ axios.get(svgSrc)
+ .then(({ status, data }) => {
+ if (status !== 200) {
+ new Error(data);
+ }
+
+ this.optimizeSvg({ html, inlineImage, svgSrc, data, resolve })
+ })
+ .catch(() => {
+ const start = inlineImage.sourceCodeLocation.startOffset
+
+ // Add the failed attribute so in next iteration this image gets filtered
+ const htmlWithFailedImage = html.substring(0, start) + '<img failed ' + html.substring((start + 5))
+
+ resolve(htmlWithFailedImage)
+ })
+
 
  })
 

spec/fixtures/index-allow-from-url.html

@@ -36,9 +36,11 @@
 
  <img id="not-found" inline src="https://notFound/typoInExtension/html-webpack-inline-svg-plugin-typoInNaming.svg" />
 
- <img id="error-loading" inline src="http:https://errorLoading/someIconWhichDoesNotExist.svg" />
+ <img id="error-loading" inline src="https:https://errorLoading/someIconWhichDoesNotExist.svg" />
 
- <img id="timeout-loading" inline src="https://timeoutLoading/someIconWhichDoesNotExist-timeout.svg" />
+ <img id="timeout-loading" inline src="https://timeoutLoading/someIconWhichDoesNotExist-timeout.svg" />
+
+ <img id="replace-me-too" inline src="https://badge.fury.io/js/html-webpack-inline-svg-plugin.svg" />
 
  <img id="not-an-svg" inline src="images/not-an-svg.png" />
 

spec/jasmine-allow-from-url.tests.js

@@ -30,6 +30,10 @@ module.exports = [
 
  expect($('img#timeout-loading').length).toBe(1)
 
+ expect($('img#replace-me-too').length).toBe(0)
+
+ expect($('svg#replace-me-too').length).toBe(1)
+
  expect($('img#not-an-svg').length).toBe(1)
 
  expect($('div#do-not-decode').length).toBe(1)