folder structure images

[headwinds]

Where you would recommend putting and configuring your images folder in this project?

I'd like to serve some photos and some svg icons - I see that express creates a static directory for the bundle.js

Would an images directory be configured in webpack.config.dev.js or devServer.js?

[headwinds]

Ok I can answer my own question and you might recommend an alternative if this isn't a good idea.

I went with the Express approach to serving static files.

1. I added the line: app.use(express.static('public')); to devServer.js
2. created a public folder with a sub images folder

Then from my component, I now have access to the images

render() {

    var styles = {
      actionSnap: {
        backgroundImage: 'url("images/logo.svg")'
      },
    };

    return (

        <div style={styles.actionSnap} />

[juanlizarazo]

For my static assets I am using webpack. I included file-loader/url-loader and they are served on http(s)://hostname/static/images/...
http(s)://hostname/static/fonts/...
I can go on details if you want.

I don't see any benefit over what you did (app.use(express.static('public'));) expect if you create your bundle/dist and want to use a different server for production to serve your assets (not express). I didn't want to depend on express for a web-ui project, and as I am relying on webpack for bundling, I wanted to keep it consistent.

Though in other projects I have used express.static just fine. I personally thing there's no right/wrong except for the dependency on express, depending on how you are deploying.

[headwinds]

Ahhh that's cool - I wasnt versed in web pack enough to know one could also bundle images - embarrassing :-D I'll try that

[juanlizarazo]

Hehe! so this is what I did, going into details to save you some time:
This is the webpack loader that handles images. Check the path. That static is in my root. /static

    // Images
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        exclude: [/node_modules/],
        include: path.join(__dirname, 'static'),
        loader: "file-loader"
      },

ANd in the output I have:

path: path.join(__dirname, 'dist'),
publicPath: '/static/'

And of course make sure to run npm install file-loader --save-dev

[headwinds]

thanks for the advice - I tried it out and it didn't quite work but you got me close to the solution. I ended using this article which also includes the image-webpack loader along with file-loader. It worked.

So each time the counter changes, I simply cycle through 6 images. I've created a Card component to hold a image and this is it's render function. I don't like the syntax I have... but this works.

`render() {

let images = [require("../images/githubEven0.png"), 
               require("../images/githubEven1.png"), 
               require("../images/githubEven2.png"), 
               require("../images/githubOdd0.png"), 
               require("../images/githubOdd1.png"), 
               require("../images/githubOdd2.png")];

let imgIndex = this.props.counter < 5 && this.props.counter > -1  ? this.props.counter : 0;
let requireImgPath = images[ imgIndex ];
let img = <img width="200" src={requireImgPath} />;

return (
  <div className="card-container">
    { img }
  </div>
);

}`

screeshot

Each time the counter changes, the card renders and updates the image which is great but I want better control over the path variables.

How does one pass in a img path string into the require? I want to write:

`let imgPath = "../images/githubEven" + counter + ".png";
 let requireImgPath = require(imgPath);

`

It complains: Error: Cannot find module '../images/githubEven0.png'

But this works: require("../images/githubEven0.png")
So why can't I write it in two lines and use a variable?
let path = "../images/githubEven0.png";
let requirePath = require(path);
???

[headwinds]

with some more research, passing a variable into require doesn't seem possible due to the static nature of requiring files - it seems really bizarre that I can't create a loop to build up an array of images though!

facebook/react-native#6391
http://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names

And finally this thread which poses my same idea of creating the array but also doesn't make it more dynamic
http://stackoverflow.com/questions/33907218/react-native-use-variable-for-image-file

If you had a gallery of a 1000 images named image1.png, image2.png, etc, how would you handle displaying all of them dynamically using this require approach? Surely, you would use a loop...

Perhaps... one simply wouldn't use webpack to pack a 1000+ assets! They would be loaded via urls...right? There must be a limit to what webpack can handle and makes sense to pack up...