Chemin pour charger les fichiers png et svg à partir du répertoire statique à l'aide de React et TypeScript
P粉122932466
P粉122932466 2023-08-30 20:10:18
0
1
529
<p>J'essaie de charger les fichiers svg et png en tant que chemins à partir du répertoire /static/ afin de les utiliser dynamiquement comme favicons. </p> <p>J'ai tout configuré selon la documentation : </p> <pre class="brush:php;toolbar:false;">./src/model/view/<SomeView.ts> ./static/<SomeFile.png|svg> ./src/custom.d.ts ./tsconfig.json ./webpack.config.js ./package.json</pre> <p>Exemple de vue <code>BrowserView.ts</code></p> <pre class="brush:php;toolbar:false;">importer FaviconPng depuis "../../../static/favicon_browser-32x32.png"; importer FaviconSvg depuis "../../../static/favicon-browser.svg" ; importer {View} depuis "./View" ; classe d'exportation BrowserView implémente View { public en lecture seule faviconPng = FaviconPng; public en lecture seule faviconSvg = FaviconSvg; }</pré> <p>Déclaration de type personnalisé <code>custom.d.ts</code></p> <pre class="brush:php;toolbar:false;">déclarer le module "*.svg" { chemin const : chaîne ; export = chemin ; } déclarer le module "*.png" { chemin const : chaîne ; export = chemin ; }</pré> <p><code>tsconfig.json</code></p> <pre class="brush:php;toolbar:false;">{ "Options du compilateur" : { "esModuleInterop" : vrai, "Décorateurs expérimentaux" : vrai, "jsx" : "réagir", "moduleRésolution" : "nœud", "strict" : vrai, "cible" : "ES6" }, "inclure" : [ "./src/model/view/*", "./src/custom.d.ts" ] }</pré> <p><code>webpack.config.js</code></p> <pre class="brush:php;toolbar:false;">module.exports = { module : { règles: [ { test : /.(jpe?g|png|svg)$/, utilisez : "url-loader" } ] } };</pré> <p><code>package.json</code> contient <code>webpack</code></p> <p>但是我仍然遇到了这个错误:</p> <pre class="brush:php;toolbar:false;">ERREUR dans ./static/favicon_browser-32x32.png 1:0 Échec de l'analyse du module : caractère inattendu « » (1:0) Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier. Actuellement, aucun chargeur n'est configuré pour traiter ce fichier. Voir https://webpack.js.org/concepts#loaders (Code source omis pour ce fichier binaire) @ ./src/model/view/BrowserView.ts 1:0-68 7:26-36 @ ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40 @ ./src/index.tsx 4:0-32 5:36-41 ERREUR dans ./static/favicon_browser.svg 1:0 Échec de l'analyse du module : jeton inattendu (1:0) Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier. Actuellement, aucun chargeur n'est configuré pour traiter ce fichier. Voir https://webpack.js.org/concepts#loaders > <?version xml="1.0" encodage="UTF-8"?> <svg id="uuid-00b901b6-ce54-412b-a6b8-3c8e80482087" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32"> <defs> <style>.uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ isolation:isoler; remplissage : noir ; } @media (préfère le schéma de couleurs : sombre) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <classe de chemin ="uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3" d="m7.52,..." /> </svg> @ ./src/model/view/BrowserView.ts 2:0-62 8:26-36 @ ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40 @ ./src/index.tsx 4:0-32 5:36-41</pre> <p> 如何从该目录加载图像作为路径来更改网站图标?</p> <pre class="brush:php;toolbar:false;">private updateFavicon(view: View): void { // 通过id标签获取元素 const favicon_svg : HTMLElement = document.getElementById("favicon_svg") !; const favicon_png : HTMLElement = document.getElementById("favicon_png")!; // 设置图标 favicon_svg.setAttribute("href", view.faviconSvg); favicon_png.setAttribute("href", view.faviconPng); }</pre></p>
P粉122932466
P粉122932466

répondre à tous(1)
P粉041856955

Il est préférable d'utiliser des chemins relatifs, par rapport à votre projet Il est difficile de répondre puisque la version du webpack n'est pas précisée.

Voici le lien pour l'utilisation des images du webpack 5 https://webpack.js.org/guides/asset-management/#loading-images

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal