2 回答

TA貢獻2080條經驗 獲得超4個贊
使用img
帶有src
in 的標簽實際上會為您向服務器發出 HTTP 請求。在這種情況下,您必須自己提出請求。您可以使用 JavaScript 原生的 which 來做到這一點Fetch API
。
// This should be the path to your SVG file.
// Modify if incorrect.
const svgFilePath = 'public/images/my_image.svg';
// Select the current image.
const image = document.querySelector('.svg');
// Create a new dom parser to turn the SVG string into an element.
const parser = new DOMParser();
// Fetch the file from the server.
fetch(svgFilePath)
? .then(response => response.text())
? .then(text => {
? ? // Turn the raw text into a document with the svg element in it.
? ? const parsed = parser.parseFromString(text, 'text/html');
? ? // Select the <svg> element from that document.
? ? const svg = parsed.querySelector('svg');
? ? // If both the image and svg are found, replace the image with the svg.
? ? if (image !== null && svg !== null) {
? ? ? image.replaceWith(svg);
? ? }
? });
并處理多個文件。在本例中,我使用了一個包含對象的數組,這些對象保存id要獲取的圖像元素的 和srcsvg 文件的 。
// Array of object containing the id of the image you want to replace
// and the src of the SVG that takes it's place.
const svgFiles = [
? { id: 'image1', src: 'public/images/my_image_1.svg' },
? { id: 'image2', src: 'public/images/my_image_2.svg' },
? { id: 'image3', src: 'public/images/my_image_3.svg' },
];
// Create a new dom parser to turn the SVG string into an element.
const parser = new DOMParser();
// Loop over each object in the array and use the id and src
// with a destructuring assignment.
for (const { id, src } of svgFiles) {
? // Find the image. If it is not there, continue with the
? // loop to the next iteration.
? let image = document.getElementById(id);
? if (image === null) continue;
? // Fetch the file from the server.
? fetch(src)
? ? .then(response => response.text())
? ? .then(text => {
? ? ? // Turn the raw text into a document with the svg element in it.
? ? ? const parsed = parser.parseFromString(text, 'text/html');
? ? ? // Select the <svg> element from that document.
? ? ? const svg = parsed.querySelector('svg');
? ? ? // If the svg is found, replace the image with the svg.
? ? ? // Otherwise, continue the loop.
? ? ? if (svg === null) continue;
? ? ? image.replaceWith(svg);
? ? });
}

TA貢獻1810條經驗 獲得超4個贊
我注意到你正在使用asset()
函數,所以我猜你不需要它是 JS
你可以使用提供Blade 指令的Laravel SVG 包@svg()
。
它又小又方便
<a href="/settings">
? ? @svg('cog', 'icon-lg') Settings
</a>
<!-- Renders.. -->
<a href="/settings">
? ? <svg class="icon icon-lg">
? ? ? ? <path d="..." fill-rule="evenodd"></path>
? ? </svg>
? ? Settings
</a>
- 2 回答
- 0 關注
- 161 瀏覽
添加回答
舉報