TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
使用img帶有 in 的標(biāo)簽src本質(zhì)上會(huì)為您向服務(wù)器發(fā)出 HTTP 請(qǐng)求。在這種情況下，您必須自己提出請(qǐng)求。您可以使用Fetch APIJavaScript 原生的 which 來(lái)做到這一點(diǎn)。
// 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);
}
});
并處理多個(gè)文件。在這種情況下，我使用了一個(gè)包含對(duì)象的數(shù)組，這些對(duì)象包含id您要獲取的圖像元素和srcsvg 文件的對(duì)象。
// 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貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊
我注意到你正在使用asset()函數(shù)，所以我猜你不需要它是 JS
你可以使用提供刀片指令的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>
舉報(bào)