ionic2 显示html,在html中的ngStyle中的Ionic 2 img不会显示在设备上(Ionic 2 img in ngStyle in html wont show up on dev...

在html中的ngStyle中的Ionic 2 img不会显示在设备上(Ionic 2 img in ngStyle in html wont show up on device)

我的图片位于src/assets/img/background.png

在我的HTML位于src/pages/myPage/myPage.html 。 我尝试像这样设置背景图像

'background-image': 'url(assets/img/background.png)'

}">

我需要[ngStyle]=""因为我在一个基于json对象属性的基础上动态设置了背景图片

我也试过了

'background-image': 'url(../assets/img/background.png)'

'background-image': 'url(./assets/img/background.png)'

'background-image': 'url(/assets/img/background.png)'

我也一直在谷歌，我遇到了这个，但我仍然无法让它在我的设备上工作(Galaxy S6)

但是，当我使用ionic serve并使用ionic emulate android --livereload模拟时，它们显示出来

此外， 这工作 ，在我的.scss在src/pages/myPage/myPage.scss我可以得到一个背景图像显示像

.myClass {

background-image: url(../assets/img/background.png)

}

请帮忙！

My image is located in src/assets/img/background.png

in my html which is located in src/pages/myPage/myPage.html. I try to set a background image like so

'background-image': 'url(assets/img/background.png)'

}">

I need the [ngStyle]="" because I am dynamically setting the background image inside an *ngFor based off a property in a json object

I have also tried

'background-image': 'url(../assets/img/background.png)'

'background-image': 'url(./assets/img/background.png)'

'background-image': 'url(/assets/img/background.png)'

I have also been google-ing and I came across this but I still can't get it to work on my device (Galaxy S6)

However, they show up when I serve using ionic serve and emulate using ionic emulate android --livereload

Also, this works, in my .scss in src/pages/myPage/myPage.scss I can get a background image to show up like

.myClass {

background-image: url(../assets/img/background.png)

}

Please help!

原文：https://stackoverflow.com/questions/42126948

更新时间：2021-02-12 13:02

最满意答案

所以我能够用这个调试模拟器，并且我发现这是在看起来像这样的路径上寻找图像

assets/img/Backgrounds/background.png

它应该是这样的

assets/img/backgrounds/background.png

So I was able to debug the emulator with this and I found out that is was looking for the image on a path that looked like this

assets/img/Backgrounds/background.png

and it should have been like this

assets/img/backgrounds/background.png

相关问答

您提供了完整的文件路径，而不是相对路径或URL。 如果您的网站位于htdocs ，请尝试将路径更改为/me/images/register.jpg You have provided a full file path, not a relative path or URL. If your website lives in htdocs, try changing the path to /me/images/register.jpg

当你看到： 无法读取undefined的属性'url' 这意味着某些东西是未定义的。 这意味着，您尝试读取属性的对象(在这种情况下为“url”)未定义。 尝试使用某种isset()。 在javascript中，您有几种方法可以对其进行排序。 我对数组的建议是myArr[0] !== undefined ，对于对象，你可以使用hasOwnProperty('url') 。 或者只使用带有||的短版本 ： getImageEvent(index: number): object {

const

...

在这两种情况下， none应该是'none'的引号。 因为您应该将string值分配给属性display 。 none (不包括qoutes)将在运行时进行评估并返回undefined ，这不是css属性display的可接受值 //our root app component

import {Component} from 'angular2/core'

@Component({

selector: 'my-app',

providers: [],

template: `

<

...

所以我能够用这个调试模拟器，并且我发现这是在看起来像这样的路径上寻找图像 assets/img/Backgrounds/background.png 它应该是这样的 assets/img/backgrounds/background.png So I was able to debug the emulator with this and I found out that is was looking for the image on a path that looked like this as

...

由于在设备上本地保存的文件是空文件，因此该问题在此过程的早期创建。 The issue was created earlier in the process as the file saved locally on the device was an empty file.

document.getElementById("skrivut").innerHTMl

你需要编写innerHTML，那里有小错字;) document.getElementById("skrivut").innerHTMl

You need to write innerHTML, little typo there ;)

您可以将其设置如下：

其中，图像是图像的产品属性。 You can set it as the following:

where image is product property for image, indeed.

问题解决了。 这真的很棘手！ 你不能在样式中加分号，例如background: 'url(images/' + (i * 2) + '.jpg);',应该是background: 'url(images/' + (i * 2) + '.jpg)'而不是 否则，角度会“忽略”它。 不确定它是设计还是错误。 Problem resolved. This is really tricky! You cannot have the semicolon in the styles, e.g backgrou

...

这是工作的plunker与一些纠正的变化！ 为@Nimsesh Patel干杯创造了这个。 新的HTML

close

My Modal title

{{items[current

...

如果Graphics是项目目录中的文件夹，那么给出@Url.Content()相对路径，它将自己处理它。 以这种方式给网址：

If Graphics is the folder in your project directory then give relative path to @Url.Content() and it will handle it itself. give url

...