'Nunjucks - How to pass image source to template
I'm using Nunjucks as templating language in my project and I have a problem with displaying img
in header
component. Problem is, that passed path comes to img
src
attribute, but img
is not displayed. I only get that little icon, which is shown when there is no img
on provided path. I can't figure out, if it's problem with webback config or it's just me doing something wrong.
So basically, this is how I'm trying to approach this.
//Import component
{% from "node_modules/@id-sk/frontend/idsk/components/header-web/macro.njk" import idskHeaderWeb %}
//Use of component
{{ idskHeaderWeb({
"headerType": "website",
"brand": {
"gestor": true,
"languages": [
{
"text": "Slovenčina",
"selected": "true,",
"link": "#"
},
{
"text": "Deutsch",
"link": "#"
},
{
"text": "English",
"link": "#"
},
{
"text": "Español",
"link": "#"
}
]
},
"main": {
//Here I'm passing img src path
"logoSrc": "src/assets/images/vpm-logo.svg",
"loginButton": {
"loggedIn":true
},
"profileButton": true,
"secondaryButton": false
},
"search": true
}) }}
Inside of this component template It looks like this:
<a href="/" title="Odkaz na úvodnú stránku">
{% if params.headerType == 'website' or params.headerType == 'projectWebsite' %}
{% if main.logoSrc %}
//Here is passed img src used
<img src="{{ main.logoSrc }}"
alt="{{ main.logoAlt if main.logoAlt else 'Ministerstvo investícií, regionálneho rozvoja a informatizácie Slovenskej republiky' }}"
class="idsk-header-web__main-headline-logo">
{% endif %}
{% if main.title %}
<h2 class="govuk-heading-m">{{ main.title }}</h2>
{% endif %}
{% endif -%}
{% if params.headerType == 'electronicService' %}
<h2 class="govuk-heading-m">{{ main.title if main.title else 'Title text' }}</h2>
{% endif %}
</a>
I have this image stored in my src/assets/images
folder:
And I will also provide screenshot from browser, where you can see that img
src
path is passed right, but it can't find that image for some other reason:
Here is also my webpack config:
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const PostCSSPresetEnv = require('postcss-preset-env');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const isDev = process.env.NODE_ENV !== 'production';
module.exports = {
mode: isDev ? 'development' : 'production',
stats: {
colors: true,
preset: 'minimal'
},
performance: { hints: isDev ? false : 'warning' },
// Eval does not work for css source maps
// `All values enable source map generation except eval and false value.`
// https://github.com/webpack-contrib/css-loader
devtool: isDev ? 'cheap-module-source-map' : 'source-map',
entry: [
path.resolve(__dirname, 'src/assets/scripts/index.js'),
path.resolve(__dirname, 'src/assets/styles/index.scss')
],
output: {
filename: isDev ? '[name].js' : '[name].[contenthash].js',
path: path.resolve(__dirname, '_site/assets'),
publicPath: '/assets/'
},
plugins: [
new WebpackManifestPlugin(),
new MiniCssExtractPlugin({
filename: isDev ? '[name].css' : '[name].[contenthash].css'
})
],
...(!isDev && {
optimization: {
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin()
]
}
}),
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.s?css/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: { postcssOptions: { plugins: [PostCSSPresetEnv] } }
},
'sass-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
generator: {
filename: `images/${isDev ? '[name][ext]' : '[contenthash][ext]'}`
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: `fonts/${isDev ? '[name][ext]' : '[contenthash][ext]'}`
}
}
]
},
resolve: {
alias: {
// Helpful alias for importing assets
assets: path.resolve(__dirname, 'src/assets')
}
}
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|