Image: new babel/webpack loader

[necolas]

We need a new webpack image loader that can generate RN source objects from assets on the file system:

require('./image.png');
// => { uri: '...', width: 40, height: 40 }

It should also support RN's syntax for resolution-specific images:

image.png
image@2x.png
image@3x.png

...by adding extra data to the object so that Image can choose the most appropriate asset:

require('./image.png');
// => { uri: '...', uri@2x: '...', uri@3x: '...', width: 40, height: 40 }

[MoOx]

Going to try this https://www.npmjs.com/package/react-native-image-loader
(can't find the repo, the only reference I found is https://github.com/willpiers/react-native-image-loader from mjohnston/react-native-webpack-server#6 but leads to a 404)

[MoOx]

Ok false alarm, this module is just 5 lines of code and totally don't work as expected :(
Will try to do one then.

[MoOx]

I did this pretty quickly and it seems to work for now

const fs = require("fs")

const ImageFile = require("image-file")

module.exports = function(content) {
  const cleanPublicPath = content
    .replace("module.exports = ", "")
    .replace(/;$/, "")

  const path = this.resourcePath
  const image = new ImageFile(fs.readFileSync(path).buffer)

  return `module.exports = {
    uri: ${ cleanPublicPath },
    width: "${ image.width }",
    height: "${ image.height }"
  }`
}

Usage in webpack config:

        {
          test: /\.(jpg|png|gif)$/,
          loader: "./src/loaders/react-native-web-image-loader.js!file-loader",
        },

[necolas]

Nice start. How do we get webpack to extract any other resolution-specific images?

[MoOx]

Not handled yet in my case, but I guess the next step would be:

const fs = require("fs")

const ImageFile = require("image-file")

module.exports = function(content) {

  //
  // @todo instead of using original file path, we should just reuse some
  // file-loader logic directly to support hash for file paths etc
  //

  const cleanPublicPath = content
    .replace("module.exports = ", "")
    .replace(/;$/, "")

  const absoluteFile = this.resourcePath
  const image = new ImageFile(fs.readFileSync(absoluteFile).buffer)

  const path = require("path")

  const absoluteData = path.parse(absoluteFile)
  const base = absoluteData.dir + absoluteData.name

  const fileData = path.parse(cleanPublicPath)
  const cleanBase = fileData.dir + fileData.name

  let cleanPublicPath2x
  let cleanPublicPath3x
  try {
    const x2 = fs.readFileSync(base + "@2x" + absoluteData.ext)
    cleanPublicPath2x = cleanBase + "@2x" + fileData.ext
    this.emitFile(cleanPublicPath2x, x2)
  }
  catch (e) {
    // do nothing, just ignore @2x file
  }
  try {
    const x3 = fs.readFileSync(base + "@3x" + absoluteData.ext)
    cleanPublicPath3x = cleanBase + "@3x" + fileData.ext
    this.emitFile(cleanPublicPath3x, x3)
  }
  catch (e) {
    // do nothing, just ignore @3x file
  }

  return `module.exports = {
    uri: ${ cleanPublicPath },
    ${ cleanPublicPath2x ? `uri@2x: ${ cleanPublicPath2x }` : "" },
    ${ cleanPublicPath3x ? `uri@3x: ${ cleanPublicPath3x }` : "" },
    width: "${ image.width }",
    height: "${ image.height }"
  }`
}

This code is currently pretty dumb and does not take in consideration the fact that path emitted by file-loader can be hashes like 0dcbbaa701328a3c262cfd45869e351f.png and will emit 0dcbbaa701328a3c262cfd45869e351f@2x.png for 2x version (which is stupid, and should just be another hash, see comment at the top of this snippet)

[giuseppeg]

You may want to fork file-loader which internally uses loader-utils and takes care of hashing etc. Additional resolution info could be passed along with other configuration options like so: res: [1, 2, 3] maybe.

[sjmueller]

Will this also support absolute source uri in production? Scenario: using create-react-app to build the site, and all static assets get hosted on a cdn while the core app is deployed to heroku. Right now a build results in relative paths like

/static/media/icon.79190308.png

when we need paths like

https://img.s3-us-east-1.amazonaws.com/static/media/icon.79190308.png

EDIT: Found this issue on create-react-app that discusses the above use case: facebook/create-react-app#936 . We'll have to see if the corresponding PR addresses it.

[EnoahNetzach]

@sjmueller FYI the related PR is this one facebook/create-react-app#937, but I can't see how that will help this issue.
Probably you can just use an environment variable and call it a day, if my understanding of your needs are not wrong.

[peter-jozsa]

I have created a webpack loader, which takes care of appropriate scaling usage too(based on device pixel ratio). Check it out, and feel free to contribute. This is my first npm package so please if something is wrong you can tell me :)
https://www.npmjs.com/package/react-native-web-image-loader

I have plans to release a webpack plugin too which is a resolver. For me, image suffixes were pain in the *ss since some module required its asset (./assets/back.png) but even the 1x scaling had a suffix(./assets/back@1x.ios.png) and webpack didn't seem to find it.

[necolas]

Cool. This library already has modules that provide the pixel ratio so the wrapper module the plugin injects seems redundant. Interested in moving development of the plugin into this repo?

[peter-jozsa]

I did not notice that you had already take care of pixel ratios. I think we could move it here since an out-of-box solution is better than installing separate packages. How would you like to impement it here?