离子背景图片未显示?

时间:2018-09-03 06:59:49

标签: angular ionic-framework ionic3

这是我使用的scss代码。

.scroll-content{
    background-image: url("assets/imgs/bkgnd.png") !important;
}

显示以下错误。

ion-dev.js?v = 3.1.8:250拒绝加载图像'data:image / png; base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMCAMBBApw1AAACWFBMVEUAAABPpf9Ck / 80f / 9Qpv9Bkf9Qpf81pP9f / 9Qpf81gP81f9p9p81f9p9p81p9f9p81p9p81p9f9p81p9f9p81p9f9p81p9f9p81f9p9p81p9f9p81f9p81f9p9p81f9p81f9p81f9 9Nov83g / 9Ppv82gv9Nov9Qpv81f / 82gP9Ppf9Ppf81gP9Rp / 9Qpv9Qpv9Ppf9Qpv81f / 82gf9Oov83gv9Nof9Rp / 9Nof80f / 9Oov83gv9PpP9Nov83g / 82gP82gP //// 9Qpv83g / 9PpP86hv9Oo / 81F / 84hf82gf81gP88if9JnP9Nof9Imv89i / 9GmP9Knf9Dlf80fv86iP9Ckf9MoP9Lnv9Ln / 9Flv9Rp / 9Hmf8 + JP8 + jf8 / jv9BkP9Aj / 9Ck / 9Bkf / 8 / v / + / v /u9v/5/P/1+v/o8v/r9P/w9v/m8f/3+//y+P/c6/8+iP9HlP/7/P/f7f/j7//a6f9Rn...vbjNs4+4+ SzlUKXfXjuZiNs / Fbl9eWoL4Face4A7t1OYnm8QuzKP2 / 1YkbDgLN48m0788YWvez2qMsaTqXSPt + YhcotLVw7 + Efv1bluEjoAgWCV1hcbWtZz1L7TNN3jPU58ohdYUH4EpG6 / OXSifR4GSS + 0GSZeweNeUQvESF / jUtdbP5Q6VSxyZqm16jkcrVcpYm / 5W7y5KqyGPPyebjG5WWhX6Qj + KuMhH + ZlHCv8zrwX7lQTfBX2gn + UkHhX + sozIs13 / svXW0q / MtlBX + 9R / AvWBb + FdeCv2Rc + Ne8C / + iffdieloIAC / tE0H1zOuBD / DaIRGLXvg40AE + ekHErhOHAxng1bMin9r3beACvLlPxEXPPx2YAAfOijhq / 7GDgQdw9Kv9Iu56 + XhwYAEcefcpkZ968e1TgQJw8q0gEYr2n / j yw38f4MwXQU + J0PXMN8c / fuP0wVN7D3DykzOfffR10CERu / 4GltYY / Gjw6lkAAAAASUVORK5CYII =',因为它违反了以下内容安全策略指令:“ default-src *”。请注意,未明确设置“ img-src”,因此将“ default-src”用作备用。

2 个答案:

答案 0 :(得分:1)

更新:

仅对于图像就足够了:

<meta http-equiv="Content-Security-Policy" content="img-src 'self'">

检查here了解更多详细信息。

旧答案: 在您的index.html中设置了以下元标记吗?

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">

这是一个问题的答案:https://stackoverflow.com/a/32166921/3354409

答案 1 :(得分:1)

我可以通过在html标签中添加样式关键字来解决该问题。

<ion-content style="background-image: url("assets/imgs/bkgnd.png") !important;"> 

your content

</content>

也许这不是一种有效的方法,但它确实适用于Real设备和计算机。