离子 - svg没有出现

Question

我做了离子2 sidemenu的应用程序构建，但svg出现在Chrome中，但生成文件android-debug.apk后svg没有出现在Android中：

按照我使用的命令：

npm install -g ionic cordova ionic start myApp --v2 sidemenu ionic platform add android ionic build android

/myApp/src/pages/page1/page1.html

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Page One</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <h3>Ionic Menu Starter</h3>
    <img src="../../assets/img/myapp.svg" alt="">
    <p>
        If you get lost, the
        <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
    </p>
    <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

你能帮我解决这个问题吗？

Answer 1

也许是因为你使用了错误的路径，请记住在构建应用时，你有这个：

所以路径需要"./assets/img/myapp.svg" intread "../../assets/img/myapp.svg"，因为在编译的应用程序中你是root用户，就像你在index.html文件中加载evething一样，它也可以在浏览器中使用

Answer 2

您可以尝试使用zip工具打开apk，并检查apk是否包含您提供的图像。如果是这样，请确保您的相对路径指向图像。

祝你好运

Answer 3

我遇到同样的问题，SVG格式在构建时不会在离子2中显示。 我的解决方案是你需要将svg文件放入正确的资源文件夹，该文件夹的路径是“./assets/img/[file_name”，就像JoxieMedina解释原因一样，我使用原始的html img标签而不是离子离子img，因为ion-img默认有一些样式。如果您正在使用ion-img，那么您可能需要定义ion-img元素的宽度和/或高度以使其可见。另外，在两种情况下，使用img或ion-img元素，我需要将“backgroun-color：transparent”和定义mime type type =“image / svg + xml”以使其工作。 希望这会对某人有所帮助。

Answer 4

对我来说，在HTML上我使用assets/path/to/file，因为在Android上无法使用其他组合。

它可能无法正常运行的另一个原因是由于路径/文件名的大小写。我正在请求MyFile.svg，但文件实际上是myfile.svg。