Images not working when app is deployed about react-course-curriculum HOT 7 CLOSED

The following worked for me....

1. Installed file-loader ( npm i -D file-loader )

2. Added a test rule in webpack.config.js (the last test that mentions svg) -

module: { rules: [ { test: /\.(js)$/, exclude: /(node_modules)/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader' ]}, { test: /\.svg$/, use: 'file-loader?name=[name].[ext]&outputPath=images' } ] },

3. Put the following in my main App.js file:

require.context('../images', true, /\.svg$/);

Basically forcing webpack to bundle the static images that have not been referenced in the code to be put into the dist folder. Did the trick for me anyway!

from react-course-curriculum.

You can use file-loader and configure webpack resolve.module to resolve require/url paths to the app folder. Then require the images (which you would dynamically do based on icon id) under the component that uses it. However, because there are nested paths in our router you also need to add a / to make it absolute.

Check out my fork to see how I did it:

• Component: https://github.com/ayushkamadji/react-fundamentals-curriculum/blob/master/app/components/WeatherImage.js
• webpack config: https://github.com/ayushkamadji/react-fundamentals-curriculum/blob/master/webpack.config.js

Or give me a shout if you'd like some help.

from react-course-curriculum.

Hi, yes.

You can test for process.env.NODE_ENV === 'production' in your DayItem.js code. If true then get the icons simply as props.fcst.weather[0].icon + '.svg' (just as in my comment above). If false then get the icons as '/app/images/weather-icons/' + props.fcst.weather[0].icon + '.svg'.

You will need to have the svg images saved in both /dist/ as well as in /app/images/weather-icons/ in order for this to work in both instances.

No idea if it's good practice to access the NODE_ENV variable in this way (I've just posted the question here: https://stackoverflow.com/questions/45149729/is-it-safe-to-use-process-env-node-env-in-my-app-code), but it works.

Generalising further, you can get more control over process.env.NODE_ENV, for example setting it to 'development' whenever you run npm run start.

To do so, modify the start script in package.json as follows...

"scripts": {
    "start": "NODE_ENV='development' webpack-dev-server --open"
},

... and also modify webpack.config.js, for example, as follows...

if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development') {
	config.plugins.push(
		new webpack.DefinePlugin({
			'process.env': {
				'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
			}
		})
	);
}

if (process.env.NODE_ENV === 'production') {
	config.plugins.push(
		new webpack.optimize.UglifyJsPlugin()
	);
}

You can then test this has worked with console.log(process.env.NODE_ENV) in your app code.

from react-course-curriculum.

Further advice on (ii) for anyone interested.
You can just move the weather icon svgs into the dist folder. As long as you have publicPath in webpack set to '/' then this will work. In your img tag, you'll have:
<img src={props.fcst.weather[0].icon + '.svg'}> and this will work fine.
It will, however, break the images on your dev server.

from react-course-curriculum.

Same issue here. Any other solutions for weather icon?

from react-course-curriculum.

I started this project using the Facebook starter app and was having the same problem getting the images to load.

One of the things they suggest for dealing with a large number of dynamically referenced images is to move the images folder into public. This may not be the correct solution depending how your build is setup but I thought I'd add it in case someone else was developing from that starter app too:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder

from react-course-curriculum.

Thanks. That works well

from react-course-curriculum.