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
535
<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