Question

偶然发现了以下svg：

在将笔的内容复制到文件liran.svg时，有以下两种情况：

使用最新的Chrome直接打开liran.svg - 效果很好
将liran.svg导入index.html（以下代码） - 我什么都看不到。

也许有任何爆发？

的index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="./liran.svg">
    </body>
</html>

Answer 1

如果它与使用index.html文件

的文件夹相同，则无法正确导入

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="liran.svg">
    </body>
</html>

如果是包含index.html的文件夹的父文件夹，请使用

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <img src="../liran.svg">
    </body>
</html>

查看此链接，了解有关html和css How to properly reference local resources in html

中引用文件的详情

导入svg作为img不起作用

1 个答案: