My image is not loading in react and I have the following in my webpack config:
use: {
loader: 'url-loader'
},
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
I don't get errors but the image is just displaying alt not working
<img src={require("./Images/start.jpg")} alt="not working" />
My complete config
module: {
rules: [
{
use: {
loader: "babel-loader"
},
test: /\.js$|jsx/,
exclude: /node_modules/
},
{
loader: 'file-loader',
test: /\.(png|jpg|jpeg|gif)$/,
}
]
}
In your webpack config file try using this loader:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'file-loader'
}
]
}
Hope this works for you.
Related
I am having issues trying to render images onto the webpage after I bundle everything with webpack. Below is my webpack.config.js file
var path = require('path');
module.exports = {
entry: './src/main/dashboardapp/src/index.js',
devtool: 'sourcemaps',
cache: true,
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
loaders: [
{ test: /\.woff2/, exclude: /(node_modules)/, loader: 'ignore-loader' },
{ test: /\.wof/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.ttf/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.svg/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.eot/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.png/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.bmp/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.ico/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.png/, loader: 'file-loader' },
{ test: /\.bmp/, loader: 'file-loader' },
{ test: /\.ico/, loader: 'file-loader' },
{ test: /\.css$/,
exclude: /(node_modules)/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.css$/,
include:
[path.resolve(__dirname, "src/main/dashboardapp/node_modules/react-table/")],
loaders: ['style-loader', 'css-loader']
},
},
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{
test: /\.(jpg|png|gif|svg|pdf|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name]-[hash:8].[ext]'
},
},
]
},
]
}
};
here is where I am rendering the image inside of reactjs
<img alt="" src={require('.././images/GreenCheck.bmp')} />
Inside the inspector it looks like this
[object Object]
Right now the images folder is sitting one directory up and then going into images. Any help I would be greatly appreciated it.
You may want to consider importing your image separately. I would re-explain it but I think its easier to look here:
how to import a picture in the same directory.
Hope this helps!
Try importing the image as a variable and use the variable in your render method.
import GreenCheck from '.././images/GreenCheck.bmp';
...
<img src={GreenCheck} />
...
So I'm trying to load images from sass on an app I'm doing but I can't seem to find the right way currently I want to load
$navbar-brand-logo: url('../../../public/images/logo.png') !default;
I keep getting that the image can't be found, this is the sass part of my web pack config:
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react-app'],
cacheDirectory: '.babel-cache'
}
}, {
test: /\.scss$/,
loader: [
'css-hot-loader'
].concat(
ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
)
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.json$/,
/\.s?css$/,
/\.(jpg|png)/
],
loader: 'url-loader',
options: {name: '[name].[ext]', limit: 30000}
}, {
test: /\.(jpg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
options: {name: '[name].[ext]'}
}]
},
I have following webpack.config. all works fine, expect less import (import './some.less'). no errors, but also no change in compiled css files.
I used React 16, Babel, typescript
Any idea whats wrong here ?
module: {
rules: [
{
exclude: [
// html-webpack-plugin
/\.ejs$/, /\.html$/, /\.ico$/,
// css-loader
/\.css$/,
// awesome-typescript-loader
/\.json$/, /\.jsx?$/, /\.tsx?$/,
// url-loader
/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/
],
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/],
loader: 'url-loader',
options: {
limit: 8192,
name: 'media/[name].[ext]'
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')()
]
}
}
]
},
{ test: /\.less$/, loaders: ["style-loader", "css-loader", "less-loader"]},
Error Terminal
ERROR in ./~/semantic-ui-css/semantic.css
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (11:0)
Error Console chrome
Uncaught Error: Cannot find module "semantic-ui-css/semantic.css"
I found the error it's in this line import 'semantic-ui-css/semantic.css'; so i search for this kind of error, i just installed url-loader and keeps the same error, here's my webpack config
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, <--- this delete a lot of errors with semantic, but wont work with "Unexpected character '#'"
loader: 'url-loader?limit=100000'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url-loader',
'sass-loader'
],
exclude: /node_modules/
}
]
}
so, how should i fix this issue? i think it's something with import 'semantic-ui-css/semantic.css'; for something that i dont get it yet, maybe because it dosnt have import (this section) from 'semantic-ui-css/semantic.css';
change this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ],
exclude: /node_modules/
},
to this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ]
}
In other words... remove the exclude.
Another option is to not change as mentioned above... And you probably dont want to assume css modules for all node_modules. I think this way is better... So, instead add an additional rule:
{
test: /\.css$/,
include: path.resolve('node_modules'),
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}
}]
}`
Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:
ERROR in ./src/index.jsx
Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string
I have updated my loaders to match the new format:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'file-loader',
query: {
name: '[path][name].[hash].[ext]',
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader',
query: {
limit: 100000
}
},
{
test: /\.icon-svg$/,
use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}]
},
// Bootstrap 3
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
}
]
},
It's as if something is not being compiled the way it was before, therefore causing a TypeError.
Turns out I was babelifing twice.
If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.
Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error
Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.
Removed .jsx and its working as expected.
A snippet of my webpack.config.js looks like this.
{
test: /\.js$/,
exclude: [/(node_modules)/],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'transform-class-properties',
'transform-decorators-legacy'
]
}
}
]
}
In case someone else is having the same issue, I had to remove the following from loader for it to work
{
test: /\.jsx?$/,
use: ['react-hot-loader/webpack']
}
In my case it helped when I removed devtool: 'inline-source-map' from webpack