[英]Why doesn't react display an svg imported from an external library?
[第三版 - 添加圖像] 我正在使用外部庫來響應顯示 svg。
根據文檔，我只需將 svg 導入組件並在 img 標簽中使用它，下面我該怎么做。
import { cardImg } from '@design-library';
return (
<Loader options={LoaderOptions} loaded={!isAppLoading}>
<Title>Presentation</Title>
<div>
<p>Utils</p>
<img src={cardImg} />
</div>
這是導入的庫文件中的內容
'use strict';
var cardImg = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"312\" height=\"234\" viewBox=\"0 0 312 234\">\n <defs>\n <path id=\"slice-a\" d=\"M17.4812487,27 C14.7979704,26.9944944 12.6276119,29.1592638 12.6330808,31.835683 L12.7918144,109.366233 C12.7972937,112.042652 14.9765341,114.216363 17.6598123,114.22188 L143.750943,111.96245 C149.185191,111.865074 153.54668,107.445107 153.571676,102.010044 L153.633081,88.6579974 L153.633081,88.6579974 L153.517345,32.1253045 C153.511866,29.4488853 151.332625,27.2751743 148.649347,27.2696582 L17.4812487,27 Z\"/>\n </defs>\n <g fill=\"none\" fill-rule=\"evenodd\">\n <rect width=\"312\" height=\"234\" fill=\"#F1F1F1\"/>\n <g transform=\"translate(73 30.114)\">\n <use fill=\"#FBCE07\" transform=\"rotate(-26 83.133 70.61)\" xlink:href=\"#slice-a\"/>\n <polygon fill=\"#404040\" points=\"5 43.886 145.954 44.176 146 66.505 5.046 66.215\" transform=\"rotate(-26 75.5 55.195)\"/>\n <path fill=\"#F1F1F1\" fill-rule=\"nonzero\" d=\"M138.522294,82.7257434 L10.0395355,82.7257434 C6.28911648,82.7257434 3.28091481,85.8514151 3.28091481,89.6701879 L3.28091481,168.781299 C3.28091481,172.600072 6.28911648,175.725743 10.0395355,175.725743 L117.901604,175.725743 C133.040989,175.725743 145.280915,163.00785 145.280915,147.355373 L145.280915,89.6701879 C145.280915,85.8514151 142.272713,82.7257434 138.522294,82.7257434 Z\"/>\n <path fill=\"#FBCE07\" fill-rule=\"nonzero\" d=\"M138.522294,84.7257434 C141.079603,84.7257434 143.165401,86.8211766 143.276279,89.4499245 L143.280915,89.6701879 L143.280915,147.355373 C143.280915,161.774411 132.145019,173.489354 118.321318,173.722211 L117.901604,173.725743 L10.0395355,173.725743 C7.48222702,173.725743 5.39642868,171.63031 5.28555084,169.001562 L5.28091481,168.781299 L5.28091481,89.6701879 C5.28091481,87.0130167 7.29759671,84.8457681 9.82755015,84.7305605 L10.0395355,84.7257434 L138.522294,84.7257434 Z\"/>\n <g transform=\"translate(13.269 92.738)\">\n <path fill=\"#FFF\" fill-rule=\"nonzero\" d=\"M18.3567802,21.0719631 L12.633856,21.0656655 L12.4038148,21.2343895 C12.0708178,21.477459 11.6353932,21.6055766 11.2083066,21.6055766 C10.7739265,21.6055766 10.3881208,21.4700163 9.9722441,21.1824879 L9.80089725,21.0631212 L4.06135454,21.0568177 L3.52661121,16.7922005 L0.266255661,14.3716832 L0.229146925,14.1989801 C0.0367285374,13.3034702 -0.00189190649,12.9340339 1.12466934e-06,12.0063293 C0.00665871366,5.71334156 5.00883333,0.668932351 11.2407816,0.67486964 C17.4747961,0.68246821 22.4680147,5.73712388 22.4607765,12.0292844 C22.4607765,12.9500333 22.4208557,13.3192846 22.2258796,14.2210814 L22.1882407,14.3951677 L18.8907468,16.8089066 L18.3567802,21.0719631 Z\"/>\n <path fill=\"#DB2026\" d=\"M0.686606559,14.1003802 C0.50148883,13.2388474 0.466107968,12.9028401 0.467932838,12.0068206 C0.474321382,5.97166135 5.2677965,1.13783888 11.2402125,1.14352889 C17.2145239,1.15081092 21.9997856,5.99412512 21.9928434,12.0292844 C21.9928434,12.9253039 21.9546119,13.2613112 21.7685464,14.1218948 L18.4515905,16.5498797 L17.9439383,20.6028491 L12.4810699,20.5968377 L12.128209,20.8556455 C11.8672751,21.046113 11.5226276,21.1369172 11.2083066,21.1369172 C10.873452,21.1369172 10.5780849,21.0318754 10.2394395,20.797746 L9.94786332,20.5946229 L4.47425429,20.5886115 L3.96597029,16.5350094 L0.686606559,14.1003802 L0.686606559,14.1003802 Z\"/>\n <path fill=\"#FBCE07\" d=\"M10.1681601,18.595684 L10.6319575,18.9523217 C10.8119007,19.0922481 11.0675595,19.1909264 11.2449683,19.1918782 C11.4252284,19.1918782 11.6821544,19.0922481 11.8620976,18.9535909 L12.3262118,18.5979051 L16.3495905,18.6026645 L16.7709364,15.2628345 L19.9718985,12.9212095 C20.0960847,12.4401928 20.1201616,12.2564799 20.121112,11.7998948 C20.121112,11.2259111 19.9718985,10.5100973 19.7460191,10.0036971 L13.9441169,15.8282513 L19.5220404,8.9318801 C19.3021802,7.96223158 18.8665782,7.18644932 18.1819702,6.5515453 L13.1334219,15.2593443 L17.5534361,5.71198706 C16.9511965,4.89400478 16.2266715,4.36983615 15.2724655,4.04619692 L12.1899871,14.8979472 L14.4180519,3.6026208 C13.7584712,3.22440711 12.9746693,3.02070477 12.166192,3.01816029 C11.9460149,3.0194356 11.9060118,3.01816029 11.6983209,3.01816029 L11.2332467,14.7967306 L10.7624553,3.01816029 C10.5269537,3.01816029 10.4707704,3.01880101 10.2955792,3.01816029 C9.52290037,3.01689725 8.76631362,3.21266726 8.0326014,3.61436065 L7.98761559,3.640696 L10.3053352,14.9179367 L7.23838011,4.0519082 C6.24995951,4.38506623 5.44496697,4.96254014 4.94758865,5.69263217 L9.38787811,15.2238075 L4.41631258,6.41955126 C3.72251736,6.98052592 3.16526357,7.90162855 2.93906731,8.85731616 L8.53219733,15.8380874 L2.73884878,9.93230607 C2.4841404,10.4637724 2.33966419,11.1548374 2.33966419,11.803385 C2.33872852,12.1908002 2.38371433,12.5455342 2.4854076,12.9392953 L5.74054274,15.3399368 L6.14097981,18.5906073 L10.1681601,18.595684 Z\"/>\n </g>\n <rect width=\"4\" height=\"6\" x=\"13.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"19.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"25.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"31.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"43.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"49.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"55.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"61.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"73.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"79.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"85.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"91.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"103.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"109.269\" y=\"151.738\" fill=\"#404040\"/>\n <rect width=\"4\" height=\"6\" x=\"115.269\" y=\"151.738\" fill=\"#404040\"/>\n </g>\n </g>\n</svg>";
module.exports = cardImg;
如果我打印導入數據的值，它會返回 svg 但在屏幕上它似乎已損壞，如您在附圖中所見。
如果我檢查元素，它會顯示您在下圖中看到的內容
我怎樣才能使用這個組件？
提前感謝大家的時間和幫助。
應用來自https://css-tricks.com/lodge/svg/09-svg-data-uris/的知識
SVG: <svg width="100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="75 30 160 180"> <defs> <path id="a" d="M17.5 27a4.8 4.8 0 00-4.9 4.8l.2 77.6c0 2.6 2.2 4.8 4.9 4.8l126-2.2a10 10 0 009.9-10V32.1c0-2.7-2.3-4.8-5-4.8L17.5 27z" /> </defs> <g fill="none" fill-rule="evenodd"> <path fill="#F1F1F1" d="M0 0h312v234H0z" /> <g transform="translate(73 30.1)"> <use fill="#FBCE07" transform="rotate(-26 83.1 70.6)" xlink:href="#a" /> <path fill="#404040" d="M7.2 76L134 14.3l9.8 20L17 96z" /> <path fill="#F1F1F1" fill-rule="nonzero" d="M138.5 82.7H10a6.9 6.9 0 00-6.7 7v79c0 3.9 3 7 6.7 7H118a27.9 27.9 0 0027.4-28.3V89.7c0-3.8-3-7-6.8-7z" /> <path fill="#FBCE07" fill-rule="nonzero" d="M138.5 84.7c2.6 0 4.7 2.1 4.8 4.7v58a26 26 0 01-25 26.3H10a4.8 4.8 0 01-4.7-4.7V89.7c0-2.7 2-4.9 4.5-5h128.7z" /> <path fill="#FFF" fill-rule="nonzero" d="M31.6 113.8H26l-.2.2a2 2 0 01-2.5 0l-.1-.2h-5.8l-.5-4.3-3.3-2.4v-.2c-.2-.9-.2-1.2-.2-2.2a11.2 11.2 0 1122.2 2.3v.1l-3.3 2.4-.6 4.3z" /> <path fill="#DB2026" d="M14 106.8c-.2-.8-.3-1.2-.3-2a10.8 10.8 0 1121.3 2l-3.3 2.5-.5 4h-5.4l-.4.3a1.6 1.6 0 01-1.9 0l-.3-.3h-5.5l-.5-4-3.2-2.5z" /> <path fill="#FBCE07" d="M23.4 111.3l.5.4.6.2c.2 0.5 0.6-.2l.5-.4h4l.4-3.3 3.2-2.3c.2-.5.2-.7.2-1.2s-.2-1.3-.4-1.8l-5.8 5.9 5.6-7c-.2-.9-.7-1.7-1.3-2.3l-5.1 8.7 4.4-9.6a4.5 4.5 0 00-2.3-1.6l-3 10.8 2.2-11.3c-.7-.3-1.5-.5-2.3-.5H25l-.5 11.7-.5-11.7h-.4c-.8 0-1.6.2-2.3.6l2.3 11.3-3-11c-1.4-1.9 1-2.4 1.7l4.5 9.6-5-8.8c-.7.5-1.3 1.4-1.5 2.4l5.6 7-5.8-6a4.5 4.5 0 00-.2 3l3.2 2.5.4 3.2h4z" /> <path fill="#404040" d="M13.3 151.7h4v6h-4zM19.3 151.7h4v6h-4zM25.3 151.7h4v6h-4zM31.3 151.7h4v6h-4zM43.3 151.7h4v6h-4zM49.3 151.7h4v6h-4zM55.3 151.7h4v6h-4zM61.3 151.7h4v6h-4zM73.3 151.7h4v6h-4zM79.3 151.7h4v6h-4zM85.3 151.7h4v6h-4zM91.3 151.7h4v6h-4zM103.3 151.7h4v6h-4zM109.3 151.7h4v6h-4zM115.3 151.7h4v6h-4z" /> </g> </g> </svg> injected IMG:<img/> <textarea style="width:90vw;height:200px"></textarea> <script> let svg = document.querySelector("svg").outerHTML; svg = svg.replace(/\>[\t\s ]+\</g, "><"); svg = svg.replace(/#/g, "%23"); svg = svg.replace(/"/g, "'"); svg = "data:image/svg+xml," + svg; document.querySelector("img").src = svg; document.querySelector("textarea").value = `<img src="${svg}"/>`; </script>
為什么控制台登錄庫在導入到不同的 React 組件后不起作用？
[英]Why console log on library doesn't work, when it has been imported to a different react component?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.