file-loader is the default fallback loader when the file exceeds the specified limit.
file-loader so that the fallback workslimit to be large enough so that your image will get processed (or remove it altogether).
Thanks for the suggestion. I don’t really know anything about webpack so I’m not sure if I’m following your advice correctly. Installing file-loader just gave me an error of
Failed to load resource: the server responded with a status of 404 (Not Found)
The image size was well below the limit for url-loader but I increased it anyway and it made no difference.
{
loader: 'url-loader',
options: {
limit: 16384
}
}
I have no errors displaying images if I link to them on a template, it is only when I use background-image in css that there is an error.
I have this problem even if I create a new mix project - is this an issue with Phoenix or could it be something on my end?
Just tried this on a vanilla Phoenix install.
/* This file is for your main application css. */
@import "./phoenix.css";
body {
background-image: url("/images/phoenix.png");
background-position: bottom;
background-repeat: no-repeat;
}
works without any change to the stock webpack config:
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
So as suggested before - hand-type the image path into the app.css and see what happens.
package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.4.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "4.4.0",
"webpack-cli": "^2.0.10"
}
}
I have been hand typing the image path. As I said the image displays but there is an error in the console
See attached screenshot error image
Actually never mind thanks, it has started working properly for me. I have no idea why but it must have been something wrong on my computer.
This saved my day. I have been struggling to show a background-image to my page. I was getting “invalid property” error. Until, after several days investigating, googling, etc, I found this post. Nowhere else I found any mention to using “/image/…” as the url. I was always pointing to my “../static/images/…”.