React 및 TypeScript를 사용하여 정적 디렉터리에서 png 및 svg 파일을 로드하는 경로
P粉122932466
2023-08-30 20:10:18
<p>svg 및 png 파일을 파비콘으로 동적으로 사용하기 위해 /static/ 디렉토리에서 경로로 로드하려고 합니다. </p>
<p>문서에 따라 모든 것을 구성했습니다.</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>샘플 보기 <code>BrowserView.ts</code></p>
<pre class="brush:php;toolbar:false;">"../../../static/favicon_browser-32x32.png"에서 FaviconPng 가져오기;;
"../../../static/favicon-browser.svg"에서 FaviconSvg를 가져옵니다.
"./View"에서 { 보기 } 가져오기;;
내보내기 클래스 BrowserView는 View를 구현합니다.
공개 읽기 전용 faviconPng = FaviconPng;
공개 읽기 전용 faviconSvg = FaviconSvg;
}</pre>
<p>맞춤 유형 선언 <code>custom.d.ts</code></p>
<pre class="brush:php;toolbar:false;">모듈 "*.svg"
const 경로: 문자열;
내보내기 = 경로;
}
모듈 "*.png"를 선언하세요.
const 경로: 문자열;
내보내기 = 경로;
}</pre>
<p><code>tsconfig.json</code></p>
<pre class="brush:php;toolbar:false;">{
"컴파일러 옵션": {
"esModuleInterop": 사실,
"실험적 데코레이터": 사실,
"jsx": "반응",
"moduleResolution": "노드",
"엄격한": 사실,
"타겟" : "ES6"
},
"포함": [
"./src/model/view/*",
"./src/custom.d.ts"
]
}</pre>
<p><code>webpack.config.js</code></p>
<pre class="brush:php;toolbar:false;">module.exports = {
모듈: {
규칙: [
{
테스트: /.(jpe?g|png|svg)$/,
사용: "url-loader"
}
]
}
};</pre>
<p><code>package.json</code>에는 <code>webpack</code> 및 <code>url-loader</code>가 포함되어 있습니다.</p>
<p>但是我仍然遇到了这个错误:</p>
<pre class="brush:php;toolbar:false;">./static/favicon_browser-32x32.png 1:0의 오류입니다.
모듈 구문 분석 실패: 예기치 않은 문자 '�'(1:0)
이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다. 현재 이 파일을 처리하도록 구성된 로더가 없습니다. https://webpack.js.org/concepts#loaders를 참조하세요.
(이 바이너리 파일에서는 소스 코드가 생략되었습니다.)
@ ./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
./static/favicon_browser.svg 1:0에 오류가 있습니다.
모듈 구문 분석 실패: 예상치 못한 토큰(1:0)
이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다. 현재 이 파일을 처리하도록 구성된 로더가 없습니다. https://webpack.js.org/concepts#loaders를 참조하세요.
> <?xml 버전="1.0" 인코딩="UTF-8"?> <svg id="uuid-00b901b6-ce54-412b-a6b8-3c8e80482087" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32"> <정의> <스타일>.uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ 격리:격리; 채우기:검정색; } @media (선호 색상 구성: 어두운) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <경로 클래스="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>
如何从该目录加载图 Image 为路径来更改网站图标?</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>
프로젝트에 상대적인 상대 경로를 사용하는 것이 더 좋습니다 웹팩 버전이 명시되지 않아 답변이 어렵습니다.
webpack 5 이미지 사용 링크는 다음과 같습니다. https://webpack.js.org/guides/asset-management/#loading-images