問題
我正在努力從 React 上的 svg（可縮放矢量圖形）檔案加載影像。我嘗試了幾種解決方法，但沒有收到任何結果。這些是已經嘗試過的解決方案：
解決方案 - 1
<img src="../../assets/icons/branch.svg" alt="branch" />
首先，我在閱讀很多文章并看到這種方式：直接將源設定為svg。但這沒有用。
解決方案 - 2
<i className="branch">:</i>
.branch {
background-image: url('../../assets/icons/branch.svg');
}
其次，我嘗試使用背景影像，但沒有奏效。
解決方案 - 3
<object type="image/svg xml" data="../../assets/icons/branch.svg" aria-label="branch">
Image
</object>
第三，我嘗試使用反對，但沒有奏效。
解決方案 4
當我嘗試用作嵌入式 svg 時，它可以作業。但我不喜歡它，我想將該 svg 用作外部。
最后
我嘗試了這些方式，只有在線方式有效。有人可以幫我將該svg用作外部嗎？
uj5u.com熱心網友回復：
你也可以試試這個
import { ReactComponent as Branch } from "../../assets/icons/branch.svg";
然后像這樣使用它
<Branch/>
或者
import Branch from "../../assets/icons/branch.svg";
background-image: url(${Branch});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/465560.html
標籤：javascript 反应 打字稿 jsx tsx
下一篇：從陣列陣列中洗掉嵌套陣列