国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Path to load png and svg files from static directory using React and TypeScript
P粉122932466
P粉122932466 2023-08-30 20:10:18
0
1
717
<p>I'm trying to load svg and png files as paths from the /static/ directory in order to dynamically use them as favicons. </p> <p>I configured everything according to the 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>Sample View <code>BrowserView.ts</code></p> <pre class="brush:php;toolbar:false;">import FaviconPng from "../../../static/favicon_browser-32x32.png"; import FaviconSvg from "../../../static/favicon-browser.svg"; import { View } from "./View"; export class BrowserView implements View { public readonly faviconPng = FaviconPng; public readonly faviconSvg = FaviconSvg; }</pre> <p>Custom type declaration <code>custom.d.ts</code></p> <pre class="brush:php;toolbar:false;">declare module "*.svg" { const path: string; export = path; } declare module "*.png" { const path: string; export = path; }</pre> <p><code>tsconfig.json</code></p> <pre class="brush:php;toolbar:false;">{ "compilerOptions" : { "esModuleInterop" : true, "experimentalDecorators" : true, "jsx" : "react", "moduleResolution" : "node", "strict" : true, "target" : "ES6" }, "include" : [ "./src/model/view/*", "./src/custom.d.ts" ] }</pre> <p><code>webpack.config.js</code></p> <pre class="brush:php;toolbar:false;">module.exports = { module: { rules: [ { test: /\.(jpe?g|png|svg)$/, use: "url-loader" } ] } };</pre> <p><code>package.json</code> contains <code>webpack</code> and <code>url-loader</code>.</p> <p>但是我仍然遇到了這個錯誤:</p> <pre class="brush:php;toolbar:false;">ERROR in ./static/favicon_browser-32x32.png 1:0 Module parse failed: Unexpected character '?' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./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 ERROR in ./static/favicon_browser.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <?xml version="1.0" encoding="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:isolate; fill:black; } @media (prefers-color-scheme: dark) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <path class="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><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

reply all(1)
P粉041856955

It is best to use relative paths, relative to your project It's difficult to answer since the webpack version is not specified.

Here is the link used by webpack 5 images https://webpack.js.org/guides/asset-management/#loading-images

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template