{{ asset_url_for('img/img_name.png') }} returning None

carlostighe

Im new to webpack. Im using [`flask-cookie-cutter`][1] which in turn uses flask webpack Im having issues in that App wont find my images in development. Images are in `assets/img` folder Ive tried using `{{ asset_url_for('img/img_name.png') }}` and various variations of it - and it just returns none. Ive tried the usual flask way of `{{ url_for('static', filename='img/img_name.png') }}` But I cant seem to access them. ``` const path = require('path'); const webpack = require('webpack'); /* * Webpack Plugins */ const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // take debug mode from the environment const debug = (process.env.NODE_ENV !== 'production'); // Development asset host (webpack dev server) const publicHost = debug ? 'http://0.0.0.0:2992' : ''; const rootAssetPath = path.join(__dirname, 'assets'); module.exports = { // configuration context: __dirname, entry: { main_js: './assets/js/main', main_css: [ path.join(__dirname, 'node_modules', 'materialize-css', 'dist', 'css', 'materialize.css'), path.join(__dirname, 'assets', 'css', 'style.css'), ], }, output: { path: path.join(__dirname, 'dsi_website', 'static', 'build'), publicPath: `${publicHost}/static/build/`, filename: '[name].[hash].js', chunkFilename: '[id].[hash].js', }, resolve: { extensions: ['.js', '.jsx', '.css'], }, devtool: 'source-map', devServer: { headers: { 'Access-Control-Allow-Origin': '*' }, }, module: { rules: [ { test: /\.less$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: debug, }, }, 'css-loader!less-loader', ], }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: debug, }, }, 'css-loader', ], }, { test: /\.html$/, loader: 'raw-loader' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, { test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/i, loader: `file-loader?context=${rootAssetPath}&name=[path][name].[hash].[ext]` }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['env'], cacheDirectory: true } }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new ManifestRevisionPlugin(path.join(__dirname, 'dsi_website', 'webpack', 'manifest.json'), { rootAssetPath, ignorePaths: ['/js', '/css'], }), ].concat(debug ? [] : [ // production webpack plugins go here new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production'), } }), ]), }; ``` [1]: https://github.com/cookiecutter-flask/cookiecutter-flask

nickjj

Hi, I never used Flask cookie cutter but have you looked at the test app that's in this project? You can see it here: https://github.com/nickjj/flask-webpack/tree/master/flask_webpack/tests/test_app I recommend going through that, looking at how images are stored along with the webpack config and then seeing how you can make changes to your webpack config based on that.

carlostighe

I havent but Ill give it a look and see if I can sort it. Thanks

lipton-v

Craicerjack, how did you solve the problem ? I have the same issue.

carlostighe

So the solution came via the cookie cutter page. It looks like its an issue because of a change in Webpack 4. Following this [comment](https://github.com/cookiecutter-flask/cookiecutter-flask/issues/509#issuecomment-513640897) you need to update your `webpack.config.js` specifically the `ManifestRevisionPlugin` by adding the following to it: `extensionsRegex: /\.(jpe?g|png|gif|svg)$/i,` ```javascript plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new ManifestRevisionPlugin(path.join(__dirname, 'dsi_website', 'webpack', 'manifest.json'), { rootAssetPath, ignorePaths: ['/js', '/css'], extensionsRegex: /\.(jpe?g|png|gif|svg)$/i, }), ```

nickjj

Thanks for reporting back a solution.

lipton-v

Craicerjack, thank you so much!