Importing image with CDN url

[rezamonangg]

So i have code structure folder like this:

app/
       javascript/
           components/
             HelloComponent.jsx <-- my component
           packs/
              images/ <-- image here
                icon.svg
              application.js

HelloComponent.jsx

  import Icon from 'images/icon.svg';
  import React from 'react';

  export default class HelloComponent extends React.Component {}

so i tried in my local machine and it load perfectly, the image is loaded from public folder.
then i tried in staging env with NODE_ENV=production, where the assets is from s3. but it doesn't load in staging because the image was loaded from public folder.

My expectation : the image url is from cdn (is it possible?)
Reality: the image url is from public folder

[rossta]

@rezadhah My understanding is that Webpacker is configured for images via file-loader, but that you'd need to hook up the publicPath option for that loader in your configuration like the examples in this comment. See #1186 for more info.

As an aside, you probably don't want your images in app/javascript/packs. The packs folder is only meant for JS entry points for Webpack output bundles.

First, try instead this layout and update your import for the image accordingly:

app/
   javascript/
      images/
         icon.svg
      components/
        HelloComponent.jsx
      packs/
        applications.js

[rezamonangg]

Thanks! I solved it by literally copied the code from the links :D
I will close this issue, but i don't know that code will be needed for future update.