Add images to Assets?

[karkkant]

Say, if I want to do something like this to display an arbitrary icon in component:
<img src={'/images/' + this.props.item.someType + '.png'} />

It doesn't work out-of-the-box since the images would have to be served from /public folder. I could work around this by moving images folder to public/assets, and change build script so that bundles and rimraf would target a resource subfolder... But is there a better way to do this? If not, maybe it's something that could be enhanced in template?

[choonkending]

Thanks for raising this issue!

Is this because you are not serving the images from your server?

Webpack

// If you have the images within your project
import filePath from 'path/to/image/in/your/project';

<img src={filePath} />

CDN
If you have a CDN, perhaps you could set your publicPath to be your CDN path

If your image server is different from static assets, perhaps use an absolute path?

@psimyn is the resident webpack guru, so he can correct me if I'm wrong :)

[jrodl3r]

BTW, using SVG Symbols (Sprites) totally works right out-the-box... And it's awesome 👍

import logos from 'images/logos.svg';
// ...
return (
  <svg>
    <use xlinkHref={logos + '#' + team.id}></use>
  </svg>
);

ex: css-tricks.com/creating-svg-icon-system-react

[felizuno]

While I like this solution (setting src to the image data) for images with no retina requirements, I'm struggling with how to use the above syntax with srcSet to provide a 2x image source. Is this possible, or do I need images in /assets to make this work?

[donpinkus]

Does this mean you need to explicitly "import" each image in your project? What about pages with dynamic images (e.g. loading a profile picture based on a URL param)?

[psimyn]

@donpinkus, setting src to an imported file is only needed for static assets, and images that live with your code. You can still set src to be any image path any it will work fine.

e.g.

 <img src={this.props.profileImageUrl} />

@felizuno the data URL is set in webpack config - removing this line will mean you always get image URLs so can use with srcSet

@karkkant for your issue - so you want to serve images from the somedomain.com/images ? If you have them in that folder already you could set express to resolve that path and I think it should work. Otherwise I've used webpack copy plugin for images, which means you don't need to change rimraf (would copy the images from some path to static/assets as part of the build)

[mnoleto]

Im struggling with this problem: I have URLs from uploaded images saved on my database and I need to load this images. Ive tried to require using variables with no success (Module not found):

<img src={require(path + fileName)} />

When I use the same URL as a string it works.

ex:

<img src={require('images/upload/filename.png')} />

I think that my problem is related with this raised issue, but I couldn`t solve the problem.

Thanks

[psimyn]

@mnoleto do you need to use require if the images are saved at a public path? I would think you could just use strings without require.

ex:

<img src='/images/upload/filename.png' />

requireing images or static assets is only for those that go through the build process

[mnoleto]

@psimyn
Ive tried that at first, with different paths (relatives and absolute), but couldnt show the image. Because that I start trying with require.

Thanks for your support.

[psimyn]

it may also depend on publicPath from webpack config (if your images aren't served from '/' or are on a different domain). Do you have more complete example somewhere?

[mnoleto]

https://github.com/mnoleto/botecofc

The component that try to load this images:
https://github.com/mnoleto/botecofc/blob/master/app/components/admin/UploadImage.jsx
Line 142

I`m developing this component to upload images using react-dropzone and show them later.

The webpack config files are the same of reactGo repo.

Thanks

[psimyn]

might need to play around with the server config possibly express.static is stealing the requests and only trying to serve images out of 'public' folder

https://github.com/mnoleto/botecofc/blob/master/server/config/express.js#L43

You can add a second express.static line to serve images from ./app/images/uploads or some other path

[mnoleto]

@psimyn You save my day. I added this line and everything worked.

app.use('/images', express.static(path.join(__dirname, '../..', 'app', 'images')));

I was definitely looking at the wrong direction.
Thank you very much.

[psimyn]

@karkkant does express.static work for you as well?

I'm not sure if we would want to add `/images' route by default, but could be worth adding readme or something about this.

[montezume]

I ended up using CopyWebpackPlugin to copy my assets and then used them.

https://www.npmjs.com/package/copy-webpack-plugin