search

juliancwirko / react-redux-webpack-meteor

React demo app with Webpack, Redux and Meteor as a backend only
MIT License
89 stars 13 forks source link

background image not working in Stylus #1

Closed infacq closed 8 years ago

infacq commented 8 years ago

I tried this

.after-header
    background #1fc8db unquote('url(/images/hero1.jpg)') no-repeat center top !important;

but the image won't show up. Do you mind help

juliancwirko commented 8 years ago

Hi, why you use unquote() here? Are there any bugs in the console?

infacq commented 8 years ago

no bug at all. if I remove the unquote also the same

juliancwirko commented 8 years ago

You need to be careful with the imagge paths. This is not the same as Meteor's public folder so maybe here is the problem.

infacq commented 8 years ago

yes. I notice everything is put right under image folder when webpack is run. So I simply place the image where I want it. Right now, the image is appear when I append ?resolve url but it only appear on Safari

juliancwirko commented 8 years ago

Hi, I think I know what is the problem. There is a bug in webpack style-loader when you use sourceMap and CSS Modules. In normal situation when you want to use background file you can do something like :

background-image url('./bg.png'); /* your bg.png file is in the same folder, and you need to use './' in that case */

And it works like it should without source maps enabled. I've implemented workaround by providing full publicPath in the dev mode.

Here is the example and it works like it should now. You can test it. If you have your image files somewhere else just use relative paths like: 

background-image url('../../../path/to/images/bg.png');

Read more about background images in webpack here: https://github.com/webpack/css-loader#usage

Kein commented 5 years ago

Trying to use background-image on discordapp.com:

Refused to load the image 'http://127.0.0.1:8888/video.svg' because it violates the following Content Security Policy directive: "img-src 'self' data: https://*.discordapp.net https://*.discordapp.com https://i.scdn.co https://i.ytimg.com https://i.imgur.com https://*.gyfcat.com https://media.tenor.co https://media.tenor.com https://*.youtube.com https://*.giphy.com https://static-cdn.jtvnw.net https://pbs.twimg.com https://assets.braintreegateway.com https://checkout.paypal.com".