Images

[matteobaccan]

Hi

I have tried to put images inside the boilerplate (src\assets\images) and use it, without success.
I have not understood how to refer to the images

I have also removed style="display: none" from image inside index.ejs: but I don't see the sprite.svg.

So: I don't understand how to put and use images inside boilerplate

Can you explain the right way to use images?

ciao
matteo

[dmnsgn]

Hi

I have not understood how to refer to the images

You can either import them in JS files and get their source url:

frontend-boilerplate/src/test/test.js

Line 5 in 3e9e678

import img from "./test.png";

or directly in the ejs template file:

<img src="./assets/images/your-image.jpg" alt="" />

I have also removed style="display: none" from image inside index.ejs: but I don't see the sprite.svg.

The sprite.svg file is grouping several svg into one (gathered from images/sprites and image import with a ?sprite query import svgSprite from "./test.svg?sprite";) and only contains symbols that you can use as:

<svg><use xlink:href="/sprite.svg?#test"></use></svg>

You can find all the different ways of importing modules and assets here:

frontend-boilerplate/src/test/test.js

Lines 1 to 74 in 3e9e678

	import css from "./test.css";
	import ejs from "./test.ejs";
	import glsl from "./test.glsl";
	import html from "./test.html";
	import img from "./test.png";
	import less from "./test.less";
	import md from "./test.md";
	import scss from "./test.scss";
	import styl from "./test.styl";
	import svg from "./test.svg";
	import svgSource from "./test.svg?source";
	import svgSprite from "./test.svg?sprite";
	import xml from "./test.xml";
	import Component from "./test.ts";
	console.log("css", css);
	console.log("ejs", ejs({ data: "data" }));
	console.log("glsl", glsl);
	console.log("html", html);
	console.log("img", img);
	console.log("less", less);
	console.log("md", md);
	console.log("scss", scss);
	console.log("styl", styl);
	console.log("svg", svg);
	console.log("svgSource", svgSource);
	console.log("svgSprite", svgSprite);
	console.log("xml", xml);
	const svgImage = document.createElement("img");
	svgImage.src = svg;
	document.body.appendChild(svgImage);
	// typescript
	const component = new Component();
	component.init();
	// syntax-dynamic-import
	async function getComponent() {
	var element = document.createElement("div");
	const { default: _ } = await import(
	/* webpackChunkName: "lodash" */ "lodash"
	);
	element.innerHTML = _.join(["Hello", "webpack"], " ");
	return element;
	}
	getComponent().then((component) => {
	console.log(component);
	document.body.appendChild(component);
	});
	// class-properties
	export default class App {
	instanceProperty = "app";
	boundFunction = () => {
	return this.instanceProperty;
	};
	static staticProperty = "staticProperty";
	static staticFunction = function () {
	return App.staticProperty;
	};
	}
	// rest
	let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
	console.log(x); // 1
	console.log(y); // 2
	console.log(z); // { a: 3, b: 4 }
	// spread
	let n = { x, y, ...z };
	console.log(n); // { x: 1, y: 2, a: 3, b: 4 }