How to use images in css with Webpack

by

I was stuck with similar issue and found that you can use url-loader to resolve "url()" statements in your CSS as any other require or import statements.

To install it:

npm install url-loader --save-dev

It will install the loader that can convert resolved paths as BASE64 strings.

In your webpack config file use url-loader in loaders

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader'
}

Also make sure that you are specifying your public path correctly and path of images you are trying to load.

More Related Contents:

  1. How to add fonts to create-react-app based projects?
  2. Center multiple images horizontally in CSS
  3. Working with CSS in React [closed]
  4. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  5. SVG data image not working as a background-image in a pseudo element
  6. CSS Image size, how to fill, but not stretch?
  7. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  8. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  9. How to vertically align an image inside a div
  10. Is there any way to hover over one element and affect a different element? [duplicate]
  11. React.js inline style best practices [closed]
  12. How can I resize an image dynamically with CSS as the browser width/height changes?
  13. Drop shadow for PNG image in CSS
  14. How to make React CSS import component-scoped?
  15. How to use template literals in tailwindcss to change classes dynamically?
  16. Replacing H1 text with a logo image: best method for SEO and accessibility?
  17. How to put an image in div with CSS?
  18. Responsive Images with CSS
  19. Change outline for OutlinedInput with React material-ui
  20. Webpack “OTS parsing error” loading fonts
  21. How to override global CSS in a CSS module file?
  22. Define an ‘s src attribute in CSS [duplicate]
  23. How do I apply vendor prefixes to inline styles in reactjs?
  24. how to set up an inline svg with webpack
  25. How to get a react component’s size (height/width) before render?
  26. How to vertically align an image inside a div
  27. ml-auto is not pushing navbar links to the right
  28. Scope Bootstrap Css in Vue
  29. input type=”image” shows unwanted border in Chrome and broken link in IE7
  30. Print styles: How to ensure image doesn’t span a page break

Leave a Comment