JS/TypeScript img src cez import

[fortran1986]

Kúpil som si reactový template plný takýchto konštrukcií v importoch:

Kód: [Vybrat]

import avatar2 from '../../../../assets/images/users/avatar-2.jpg';
import avatar3 from '../../../../assets/images/users/avatar-3.jpg';
import avatar9 from '../../../../assets/images/users/avatar-9.jpg';
import avatar10 from '../../../../assets/images/users/avatar-10.jpg';

a potom ďalej v JSX / TSX kóde vidím:

Kód: [Vybrat]

<div className="assign team mt-4">
	<h6 className="font-weight-bold">Assign To</h6>
	<a href="/">
		<img src={avatar2} alt="" className="avatar-sm m-1 rounded-circle" />
	</a>
	<a href="/">
		<img src={avatar3} alt="" className="avatar-sm m-1 rounded-circle" />
	</a>

	<a href="/">
		<img src={avatar9} alt="" className="avatar-sm m-1 rounded-circle" />
	</a>

	<a href="/">
		<img src={avatar10} alt="" className="avatar-sm m-1 rounded-circle" />
	</a>
</div>

Chápem zmysel toho celého lebo cesta k obrázku sa potom dá dopytovať relatívne vzhľadom na aktuálnu pozíciu v adresárovej štruktúre. Každopádne sa mi to vôbec nepáči (osobne prefereujem všetko absolútne) Ale keďže sa mi to nechce teraz všetko prerábať asi najlepšia cesta bude nastaviť si webpack tak aby to celé prekúsol žiaľ snažím sa o to už hodinu a webpack nie a nie prinútiť aby mi to zožral. Neviete mi prosím poradiť ako na to?

Šablóna bola určená pre JS ale ja som ju skonvertoval do typecriptu nástrojom js-to-ts-converter (ale to teraz asi nechajme bokom)

[Reklama]

[L..]

A co bylo v původním kódu?

[fortran1986]

A co bylo v původním kódu?

...nerozumiem celkom načo konkrétne sa dotazujete...

..ale nakoniec som to ajtak vyriešil "hrubou silou". Upravil som si jeden starší konverzný skript a spravil som si takýto jednoúčelový skriptík:

https://pastebin.com/P3PEYbCs

ktorý prejde JS a TS súbory v celom projekte:

a z takéhoto importu:

Kód: [Vybrat]

import avatar2 from '../../../../assets/images/users/avatar-2.jpg';

spraví toto:

Kód: [Vybrat]

const avatar2 = '/assets/images/users/avatar-2.jpg';

Ten skript by sa dal samozrejme napísať aj omnoho krajšie (a bezpečnejšie) ale ja som to potreboval zbúchať čo najrýchlejšie.

[fortran1986]

Ešte som trošku vytunil ten skript skript, a zavesil ho na github keby dakto potreboval vyriešiť podobný problém tak nech nemusí "objavovať Ameriku":

https://gist.github.com/frank-hliva/6ab90d54d351dc43d7fdf2a00c90f843

Skript skonvertuje všetky JS, TS, JSX a TSX súbory v adresári na norálne cesty samozrejme prechádza folder rekurzívne.

Ešte poznámka: hentie divné cesty pre assets:

Kód: [Vybrat]

import avatar2 from '../../../../assets/images/users/avatar-2.jpg';
import avatar3 from '../../../../assets/images/users/avatar-3.jpg';
import avatar9 from '../../../../assets/images/users/avatar-9.jpg';
import avatar10 from '../../../../assets/images/users/avatar-10.jpg';

podporuje štandartne React (konkrétne package react-scripts https://create-react-app.dev/docs/adding-images-fonts-and-files/) keď nepoužívaťe Webpack

...jasom o tom nevedel, lebo React bez webpacku som nikdy nepoužíval. Možno by sa dal webpack nastaviť, tak aby tie cesty prehltol, ale nechcelo sa mi s tým babrať. A ďalšia vec je že mám vlastný server statického contentu ktorý optimalizuje multimediálne súbory tak aby sa prenieslo čo najmenej Byteov. Napr keď zistí že prehliadač podporuje webp tak jpg skonvertuje (a nachachuje) na webp a odošle prehliadaču (starším prehliadačom naopak pošle jpg). Keby som používal cesty ako henten template, tak by mi to prinieslo komplikácie a musel by som ten obsah posielať priamo ...takže musel som to skonvertovať na absolútne cesty nech v tom neni bordel.