Questions tagged [webpack-file-loader]

Hadles such imports

import img from './file.png'

with this configuration

  rules: [
  {
    test: /\.(gif|jpg|png)$/,
    use: [
      {
        loader: 'file-loader'
      }
    ]
  }

and result: image files were copied to output folder.

Other application: copy css styles to the output folder adding the hash.

https://github.com/webpack-contrib/file-loader

289 questions
0
votes
0 answers

Loading images in SCSS creating duplicate image folder using webpack

So i started using webpack and scss for my react application. I have a images folder containing all my apps image files. I noticed when I tried setting a background image div to a url like background-image: url("../images/bg1.jpeg"); It wasn't…
ZarifS
  • 467
  • 1
  • 11
  • 20
0
votes
2 answers

Webpack has stopped processing fonts and images

been working with Webpack yesterday and set up a basic process with it that was working. Come back today and the fonts are no longer being transferred to the 'dist' folder. I made a change to the webpack config file to try and process images and…
Lovelock
  • 7,689
  • 19
  • 86
  • 186
0
votes
2 answers

Images does not show up after processing via webpack

I began to use webpack in my React application for bundling images but they don't show up in the browser (there is an tag, but no image). If I run "webpack" images are present in the public folder with hashed names and if I run…
turisap
  • 231
  • 4
  • 13
0
votes
1 answer

Webpack angular 4 file-loader

I'm using angular-starter. Right now I'm trying to deploy to a test server. My problem is with the images located at src/assets/img. My angular 4 code (component and view): // Component public ngOnInit() { this.logoUrl =…
lmarcelocc
  • 1,301
  • 11
  • 21
0
votes
0 answers

Error while loading image from file-loader

I am facing error while getting same bundled image from different route While my app is in route http://localhost:8080 My image load perfectly from url http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg But as my app route changed to…
Raju Adhikari
  • 301
  • 1
  • 3
  • 14
0
votes
2 answers

Webpack: Is it possible to load svg with the file-loader? If yes, how?

I want to load my svg via the file-loader with webpack. Is this even possible and if yes, how do I do that. webpack.config.js test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: 'file-loader', options: { name:'[name].[ext]', …
Dario
  • 618
  • 1
  • 11
  • 28
0
votes
2 answers

Webpack file-loader not exporting images

I am using webpack for my PHP and React project. I want to load a background image from my .scss file with the webpack file-loader but for some reason I don't know, the img-folder does not get copied/exported to my dist-folder. Below is the…
ST80
  • 3,565
  • 16
  • 64
  • 124
0
votes
1 answer

file-loader image full path

How can I use the file-loader to save full images paths? my loader cfg test: /\.(png|jpe?g|gif|ico)$/, use: [ 'file-loader?name=[name].[ext]&outputPath=images/' ] img path src/images/1.jpg and src/images/section/2.jpg On production I get…
maksymddd
  • 3
  • 1
0
votes
1 answer

React: webpack file loader doesn't loads correctly

I have configured webpack to load jpg files but yet it my app doesn't load image and couldn't find them. here is webpack config: const path = require("path"); module.exports = { entry: [ './app/app.jsx' ], output: { path:…
0
votes
2 answers

file-loader is not coping images

I am making the transition from gulp to webpack and I have images in a static/img folder that I want to process with image-webpack-loader and then copy to a build/public/img folder. Is file-loader what I want to use for this? The problem is that…
SmellydogCoding
  • 414
  • 8
  • 23
0
votes
1 answer

Webpack s3 plugin not updating images to be loaded from S3

I have a problem with Webpack S3 Plugin. I have a very basic configuration: new S3Plugin({ s3Options: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_ACCESS_KEY_SECRET, region:…
Gasim
  • 7,615
  • 14
  • 64
  • 131
0
votes
1 answer

Syntax error with file-loader when upgrading to Webpack 3

I am in process of upgrading to from Webpack 2 to 3 and I'm running into a problem with file-loader@1.0.0-beta.1. Here is the error I'm getting: You may need an appropriate loader to handle this file type. | export default = __webpack_public_path__…
Spencer Carnage
  • 2,056
  • 2
  • 28
  • 41
0
votes
1 answer

Img is not loading at React component

I am trying to load an image at my component: import React from 'react'; import style from './Sidebar.scss'; const Sidebar = () => (
Alessander França
  • 2,697
  • 2
  • 29
  • 52
0
votes
1 answer

Using aliases with sass-loader to avoid relative path mess

I have a .scss file in which I'm using a backgorund image (background-image: url('../../../image.png')). The file-loader webpack plugin detects that image and copies it when I'm building my app, which is great. The problem is that I have quite some…
alexandernst
  • 14,352
  • 22
  • 97
  • 197
0
votes
2 answers

webpack 2 and background images in css

I am using webpack2 (I am very new to it) in a react app. Everything works fine when I am loading images inside the app, via the img tag. But I cannot have it working when using the image as background url inside the css. this is my…
Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31