Django Webpack Loader setting does not render images

Question

I am using Django webpack loader to render VueJs files. I have two similar applications and I can view the images in one application but other does not work. This is how I configure my Vue Webpack:

const BundleTracker = require("webpack-bundle-tracker");

    module.exports = {
        publicPath: "http://0.0.0.0:8080/",
        outputDir: './dist/',

        chainWebpack: config => {

            config.module.rules.delete('eslint');

            config.optimization
                .splitChunks(false)

            config.module
              .rule('vue')
              .use('vue-loader')
              .loader('vue-loader')
              .tap(options => {
                options.transformAssetUrls = {
                  img: 'src',
                  image: 'xlink:href',
                  'b-img': 'src',
                  'b-img-lazy': ['src', 'blank-src'],
                  'b-card': 'img-src',
                  'b-card-img': 'src',
                  'b-card-img-lazy': ['src', 'blank-src'],
                  'b-carousel-slide': 'img-src',
                  'b-embed': 'src'
                }

                return options
              })

            config
                .plugin('BundleTracker')
                .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

            config.resolve.alias
                .set('__STATIC__', 'static')

            config.devServer
                .public('http://0.0.0.0:8080')
                .host('0.0.0.0')
                .port(8080)
                .hotOnly(true)
                .watchOptions({poll: 1000})
                .https(false)
                .headers({"Access-Control-Allow-Origin": ["\*"]})
                }
            };

These are my Django settings:

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': DEBUG,
        'BUNDLE_DIR_NAME': '/bundles/',  # must end with slash
        'STATS_FILE': os.path.join(FRONTEND_DIR, 'webpack-stats.json'),
    }
}

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

and urls.py:

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

I have been struggling for two days. I can get the image url as text in the template, meanwhile images are not rendered. Anyone has a clue ?

Thanks

did you find any solution for this problem? – yvl Dec 07 '20 at 14:44 — yvl, Dec 07 '20 at 14:44
yes I have found a solution. check my own answer – ytsejam Dec 08 '20 at 00:44 — ytsejam, Dec 08 '20 at 00:44
oh, thank you. waiting for your answer! – yvl Dec 08 '20 at 01:02 — yvl, Dec 08 '20 at 01:02
I have added my code, could you understand ? – ytsejam Dec 08 '20 at 01:28 — ytsejam, Dec 08 '20 at 01:28

score 0 · Answer 1 · answered Dec 08 '20 at 01:08

0

If you are rendering Vue app inside Django templates, you need to edit urls.py for media files as below:

urlpatterns +=[
...
    re_path(r'^media/(?P<path>.*)$', serve, {
        'document_root': settings.MEDIA_ROOT
    }),
...
]

answered Dec 08 '20 at 01:08

ytsejam

3,291
7
39
69

I get the idea, but didn't understand what is `serve` stands for. Actually, could you please check out the my question for? I showing my `urls.py` https://stackoverflow.com/questions/65182305/loading-media-root-files-with-django-webpack-loader – yvl Dec 08 '20 at 01:34

Django Webpack Loader setting does not render images

1 Answers1