Can't import image from src

[iRoachie]

So I have a list of reviews each with an logo field which is a path to the image. The images are in an images folder in my src folder.

Example
logo: 'src/images/logos/zoosk-logo.png',

I have a Reviews component which renders out Review components from the list passing the review object as a prop.

In the Review component I then display the logo in an image tag. Like so:

<img className="review__logo" src={this.props.review.logo} alt=""/>

This works great with npm start, but when I use the run build, the images aren't copied over to the build file so the links don't work. I know if you import the image then webpack will bundle it in the build step. But I can't import it, because the path comes from a prop, and imports can only be done at the top.

Is there anyway to go around this? I'm relatively new to react.

[schuchowsky]

I was looking for this right now. Maybe create-react-app could have a default img or assets folder to move it's content into the build file?

[fson]

This feature was discussed in #28, but the previous conclusion was that it is out of scope for Create React App. The recommended way to handle image assets is using imports, because it also helps us ensure that when the image changes, the browser cache is busted correctly. This is easy to miss, when images are only copied over and not fully handled by the build system.

Would copying the files to the build folder or deploying them to a CDN with a separate script work for your use case?

[iRoachie]

@fson Oh I see, i thought it could've been done without ejecting. Copying the files to the build folder would be the better approach for me. Any material you could point me to that would allow me to do this?

[gaearon]

No, you don't need to eject for this. Just import those images wherever you create this object.

import logo from './logo.png'
import logo2 from './logo2.png'

export default {
  logo,
  logo2
}

Then pass this object down as you like. Importing images can be done in any file.

[gaearon]

This works great with npm start

Since 0.4.0, it shouldn't. (As you noted it was broken in production in the first place.) Please use imports in JS instead, or please explain why JS imports don't satisfy your use case. Thanks!

[gaearon]

To clarify. Your mental model shouldn't be "I need to import files right where they will be used" (like in Inage components). Your mental model should be "There should never be string literals in my code meaning absolute URLs to assets because build system won't know to include them. So every time I want to write a string literal for image URL, I should instead write an import. The result of that import will be the string I want (and can pass anywhere else)."

[iRoachie]

Thanks a lot @gaearon i'm actually coming from an angular background so i'm new to react. Thanks for guiding me on the right path. Solution works !

[gaearon]

This is not really React-specific by the way. It's just that we think automatic bundling of assets with content hashes and compile-time checks for missing files is valuable enough that we ask people to use this mechanism for importing instead. The feature is more related to Webpack, not to React.

Is there something in Usage Guide we could change to make this use case clearer?

[iRoachie]

Oh i guess that's true. The docs are great man, just a new way of thinking for me since i'm used to referencing static assets the more traditional way. Thanks again

[schuchowsky]

@gaearon @iRoachie worked like a charm for me too. Much like @iRoachie, I'm also coming from an Angular background, where I didn't use even npm or webpack. Other day I was trying to do that with file-loader.. Webpack feels confusing for newcomers (at least for me).

Maybe a small section about importing static files would add a lot of value to create-react-app, as it was created to ease the configuration process - even being related to Webpack, not React.

[gaearon]

I think there is a section on "adding images" in usage guide. Is there a way to make it more helpful?

[schuchowsky]

Yes, the section is there. I think I was so focused on Webpack loaders that couldn't find it. It's very clear, can't be more helpful than that. Thanks.

[iRoachie]

Well I guess you could make a note saying that it's the only way of referencing local files.