2 回答

TA贡献1883条经验 获得超3个赞
使用img带有 in 的标签src本质上会为您向服务器发出 HTTP 请求。在这种情况下,您必须自己提出请求。您可以使用Fetch APIJavaScript 原生的 which 来做到这一点。
// 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贡献1963条经验 获得超6个赞
我注意到你正在使用asset()函数,所以我猜你不需要它是 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>
添加回答
举报