Not loading image processed by webpack correctly #343

cnakh · 2023-03-08T16:34:52Z

The configuration load JS and CSS well but image not get filename base on data generated by BundleTracker.

Here is the webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  context: __dirname,
  entry: "./assets/scripts/index.js",
  output: {
    publicPath: "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[contenthash].js",
    assetModuleFilename: "images/[name].[contenthash][ext]",
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "resolve-url-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          }
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
    }),
    new BundleTracker({ filename: "./manifest.json" }),
  ],
};

In index.js

...
import logo from "./../images/logo.png";
...

The template

{% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Jouy Luk</title>
        {% render_bundle 'main' 'css' %}
    </head>
    <body class="home">
        <!-- APP ROOT -->
        <div class="app-root">
            <!-- HEADER -->
            <header class="header">
                <div class="container-xxl">
                    <div class="header__wrapper">
                        <img src="{% webpack_static 'images/logo.png' %}"/>
                    </div>
                </div>
            </header>
            <!-- /HEADER -->

            <!-- MAIN -->
            <main class="main">
                
            </main>
            <!-- /MAIN -->

            <!-- FOOTER -->
            <footer class="footer">
                
            </footer>
            <!-- /HEADER -->
        </div>
        <!-- /APP ROOT -->
        {% render_bundle 'main' 'js' %}
    </body>
</html>

The result

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jouy Luk</title>
        <link href="/dist/css/main.b733b82b4c760a2525ad.css" rel="stylesheet">
    </head>
    <body class="home">
        <!-- APP ROOT -->
        <div class="app-root">
            <!-- HEADER -->
            <header class="header">
                <div class="container-xxl">
                    <div class="header__wrapper">
                        <img src="/dist/images/logo.png">
                    </div>
                </div>
            </header>
            <!-- /HEADER -->

            <!-- MAIN -->
            <main class="main">
                
            </main>
            <!-- /MAIN -->

            <!-- FOOTER -->
            <footer class="footer">
                
            </footer>
            <!-- /HEADER -->
        </div>
        <!-- /APP ROOT -->
        <script src="/dist/js/main.680479a8b956aff2e3a9.js"></script>
    
</body>
</html>

The manifest.json

{
  "status": "done",
  "assets": {
    "css/main.b733b82b4c760a2525ad.css": {
      "name": "css/main.b733b82b4c760a2525ad.css",
      "path": "/app/dist/css/main.b733b82b4c760a2525ad.css",
      "publicPath": "/dist/css/main.b733b82b4c760a2525ad.css"
    },
    "images/car-red.cc4b98127f1640f00980.png": {
      "name": "images/car-red.cc4b98127f1640f00980.png",
      "path": "/app/dist/images/car-red.cc4b98127f1640f00980.png",
      "publicPath": "/dist/images/car-red.cc4b98127f1640f00980.png"
    },
    "images/car-white.64e4df72e263f27b4e10.jpeg": {
      "name": "images/car-white.64e4df72e263f27b4e10.jpeg",
      "path": "/app/dist/images/car-white.64e4df72e263f27b4e10.jpeg",
      "publicPath": "/dist/images/car-white.64e4df72e263f27b4e10.jpeg"
    },
    "images/logo.ea714c6de5100fa65aa6.png": {
      "name": "images/logo.ea714c6de5100fa65aa6.png",
      "path": "/app/dist/images/logo.ea714c6de5100fa65aa6.png",
      "publicPath": "/dist/images/logo.ea714c6de5100fa65aa6.png"
    },
    "js/main.680479a8b956aff2e3a9.js": {
      "name": "js/main.680479a8b956aff2e3a9.js",
      "path": "/app/dist/js/main.680479a8b956aff2e3a9.js",
      "publicPath": "/dist/js/main.680479a8b956aff2e3a9.js"
    }
  },
  "chunks": {
    "main": [
      "css/main.b733b82b4c760a2525ad.css",
      "js/main.680479a8b956aff2e3a9.js"
    ]
  },
  "publicPath": "/dist/"
}

The image src should be /dist/images/logo.ea714c6de5100fa65aa6.png but /dist/images/logo.png.

The text was updated successfully, but these errors were encountered:

fjsj · 2023-03-09T13:16:21Z

This is the expected behavior. From docs:

Please note that this approach will use the original asset file, and not a post-processed one from the Webpack pipeline, in case that file had gone through such flow (i.e.: You've imported an image on the React side and used it there, the file used within the React components will probably have a hash string on its name, etc. This processed file will be different than the one you'll grab with webpack_static).

To solve this for your use case, you need to drop the hash on your assetModuleFilename, that's what webpack docs suggest: https://webpack.js.org/guides/asset-modules/#custom-output-filename.

So change assetModuleFilename from "images/[name].[contenthash][ext]", to "images/[name].[ext]",

I'll keep this one open and close the other duplicate issues.
Sorry for this, but we don't have a solution that supports hashes yet.

em1le · 2024-02-06T16:27:32Z

Hey fellow developers any update on the subject ?

fjsj · 2024-02-06T19:36:40Z

No, feel free to open a PR addressing this or discussing solutions here.

em1le · 2024-02-07T14:55:05Z

I'll let you know once I'll figure out something. Thanks for your reactivity btw

Asset resources in `webpack-stats.json` file will look like, ```json { "assets": { "assets/test-bbf3c94e2a3948c98900.txt": { "name": "assets/test-bbf3c94e2a3948c98900.txt", "path": "/home/user/project-root/assets/test-bbf3c94e2a3948c98900.txt", "publicPath": "http://localhost:3000/assets/test-bbf3c94e2a3948c98900.txt", "sourceFilename": "src/test.txt" } } } ``` Related to django-webpack/django-webpack-loader#343

Asset resources in `webpack-stats.json` file will look like, ```json "assets": { "assets/test-bbf3c94e2a3948c98900.txt": { "name": "assets/test-bbf3c94e2a3948c98900.txt", "path": "/home/user/project-root/assets/test-bbf3c94e2a3948c98900.txt", "publicPath": "http://localhost:3000/assets/test-bbf3c94e2a3948c98900.txt", "sourceFilename": "src/test.txt" } } ``` Related to django-webpack/django-webpack-loader#343

Adding the following template tag ``` {% webpack_asset 'path/to/original/file' %} ``` Fixes django-webpack#343 Depends on django-webpack/webpack-bundle-tracker#125

batistadasilva · 2024-03-29T08:56:42Z

Hello everyone

I suggest the following approach for adressing this issue with Webpack 5:

Add original source file paths of asset resources to webpack-stats.json
Add assets source filenames webpack-bundle-tracker#125
Create the webpack_asset template tag that handles transformed files URLs
Handle transformed assets URL #397

@fjsj What do you think?

fjsj · 2024-04-01T13:02:55Z

Thanks for the contribution @batistadasilva !
I'm excited to merge this, but please check PR comments.

Asset resources in `webpack-stats.json` file will look like, ```json "assets": { "assets/test-bbf3c94e2a3948c98900.txt": { "name": "assets/test-bbf3c94e2a3948c98900.txt", "path": "/home/user/project-root/assets/test-bbf3c94e2a3948c98900.txt", "publicPath": "http://localhost:3000/assets/test-bbf3c94e2a3948c98900.txt", "sourceFilename": "src/test.txt" } } ``` Related to django-webpack/django-webpack-loader#343

Adding the following template tag ``` {% webpack_asset 'path/to/original/file' %} ``` Fixes django-webpack#343 Depends on django-webpack/webpack-bundle-tracker#125

Adding the following template tag ``` {% webpack_asset 'path/to/original/file' %} ``` Fixes #343 Depends on django-webpack/webpack-bundle-tracker#125

Asset resources in `webpack-stats.json` file will look like, ```json "assets": { "assets/test-bbf3c94e2a3948c98900.txt": { "name": "assets/test-bbf3c94e2a3948c98900.txt", "path": "/home/user/project-root/assets/test-bbf3c94e2a3948c98900.txt", "publicPath": "http://localhost:3000/assets/test-bbf3c94e2a3948c98900.txt", "sourceFilename": "src/test.txt" } } ``` Related to django-webpack/django-webpack-loader#343

batistadasilva · 2024-04-04T07:54:54Z

@fjsj Thanks for the review!

This was referenced Mar 9, 2023

An proposal for a better webpack_static #330

Closed

webpack_static does not return filename with hash #138

Closed

fjsj changed the title ~~Not load image correctly~~ Not load image processed by webpack correctly Nov 29, 2023

fjsj changed the title ~~Not load image processed by webpack correctly~~ Not loading image processed by webpack correctly Nov 29, 2023

batistadasilva mentioned this issue Mar 29, 2024

Add assets source filenames django-webpack/webpack-bundle-tracker#125

Merged

batistadasilva mentioned this issue Mar 29, 2024

Handle transformed assets URL #397

Merged

fjsj closed this as completed in #397 Apr 2, 2024

fjsj pushed a commit that referenced this issue Apr 2, 2024

Handle transformed assets URL

bf59f53

Adding the following template tag ``` {% webpack_asset 'path/to/original/file' %} ``` Fixes #343 Depends on django-webpack/webpack-bundle-tracker#125

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not loading image processed by webpack correctly #343

Not loading image processed by webpack correctly #343

cnakh commented Mar 8, 2023

fjsj commented Mar 9, 2023

em1le commented Feb 6, 2024

fjsj commented Feb 6, 2024

em1le commented Feb 7, 2024

batistadasilva commented Mar 29, 2024

fjsj commented Apr 1, 2024

batistadasilva commented Apr 4, 2024

Not loading image processed by webpack correctly #343

Not loading image processed by webpack correctly #343

Comments

cnakh commented Mar 8, 2023

fjsj commented Mar 9, 2023

em1le commented Feb 6, 2024

fjsj commented Feb 6, 2024

em1le commented Feb 7, 2024

batistadasilva commented Mar 29, 2024

fjsj commented Apr 1, 2024

batistadasilva commented Apr 4, 2024