Phonegap 图像未显示

2024-05-09

我无法让图像在我的phonegap 版本中正常工作。

我读过绝对路径可能不起作用,所以我尝试了绝对路径和相对路径,但仍然没有运气。

我包括这样的图像:

<Col key={1} xs={3}>
  <Image src='/tire_selected.png' responsive />
</Col>

或亲戚

<Col key={1} xs={3}>
  <Image src='tire_selected.png' responsive />
</Col>

equals

<img class="img-responsive" src="tire_deselected.png" data-reactid=".0.0.1.0.0.0.0.1.1.0.0.$4.0">

Col & Image 是使用 bootstrap-react 的引导辅助组件。这一切在 Web 视图中都可以正常工作,但在使用 PhoneGap 构建时则不然。但应该如此,源代码已经编译并且在这两种情况下都没有错误。

以下是我的 config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.exampleapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>App</name>
    <description>
    App
    </description>
    <author email="[email protected] /cdn-cgi/l/email-protection" href="http://www.example.com">
        Author
    </author>
    <content src="index.html" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="14" />
    <preference name="android-installLocation" value="auto" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <icon src="icon.png" />
    <access origin="*" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Git 存储库:

    app.js
    vendor.js
    config.xml
    favicon.ico
    humans.txt
    index.html
    robots.txt
    tire_deselected.png
    tire_selected.png

Icon.png 工作正常。我不知道是什么导致其他图像不起作用。任何帮助,将不胜感激!

Edit

我尝试过设置 content-security-policy,如果这是我无法设置 img-src 并通过 javascript 显示图像的问题。

<meta http-equiv="Content-Security-Policy" content="
  default-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  style-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  img-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  script-src http://10.3.10.104/ 'self' * 'unsafe-inline';">

但还是没有运气

file:///tire_deselected.png net::ERR_FILE_NOT_FOUND

该文件就在那里,因为当将 img 元素插入到 index.html 时,它会显示出来。

我什至尝试通过运行开发人员工具的源文件夹中显示的路径来访问它。

file:///data/user/0/com.oas.exampleapp/files/downloads/app_dir/tire_deselected.png 

也不起作用,我开始认为phonegap被打破了,至少与react结合起来效果很差。


编译后build.phonegap.com https://build.phonegap.com将源文件放入“www”目录中。

您可以使用以下路径“/android_asset/www/”访问本地图像文件

<image src='/android_asset/www/tire_selected.png' responsive />

如果您的图像放置在根目录内的子目录中,那么您可以使用以下命令:

<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />

Note:如果其中包含本地图像文件,请将“子目录”替换为您自己的目录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Phonegap 图像未显示 的相关文章

随机推荐

  • R markdown 引文标识符

    R markdown 允许使用 YAML 元数据部分中的参考书目元数据字段指定参考书目文件 例如 title Sample Document output html document bibliography bibliography bi
  • 将非算术类型作为参数传递给 cmath 函数是否有效?

    给定以下用户定义类型S具有转换功能double struct S operator double return 1 0 以及以下调用cmath http en cppreference com w cpp header cmath使用类型的
  • 导入 Haskell 模块

    我是哈斯克尔的新手 为什么当我尝试使用时Days from Data Time我收到此错误 Could not find module Data Time It is a member of the hidden package time
  • 使用 keyup 事件仅触发表单验证中文本框的部分规则,并取消其余规则的事件

    我的应用程序中有一个表单 我正在使用 jQuery 表单验证插件对其进行验证 其中一项规则是远程类型 用于验证用户名是否不存在 我已经能够覆盖 onkeyup 事件 因此规则不会为我输入的每个字母发送到服务器 我完成的方式如下 var va
  • CLion 2019.2.1 工具链:未找到 WSL

    我通过 Windows 商店安装了 Ubuntu 然后按照此处的 Jetbrains CLion WSL 设置指南进行操作 https www jetbrains com help clion how to use wsl developm
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • 用于真实 Web 项目的 Scala-JS [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 有人用过吗Scala JS在真实的网络项目中 但不仅仅适用于普通的JavaScript在隔离环境中替换 我想尽可能多地使用 Scala 我希望可
  • JavaScript - 这个这个

    String prototype foo String prototype foo bar function How can you reference the grandparent string console log this par
  • 如何使用 terraform 创建 azure 应用程序注册和客户端密钥

    我正在尝试为 Azure 应用程序注册和客户端密钥创建 Terraform 代码 对订阅具有读取访问权限的服务主体 基本上 我正在尝试将 Azuresafe 与 Terraform 集成 并尝试确定如何逐步配置 https docs saf
  • 为什么这个 CSS nowrap 不起作用?

    我试图阻止 bar top container div 包裹它的内容 无论页面有多宽 即两个选择应该始终出现在同一行 但是当页面宽度太小而无法容纳它们时 这不起作用一方面 我该如何解决这个问题 Styles bar top containe
  • 不兼容的类型 - 是因为数组已经是指针吗?

    在下面的代码中 我创建一个基于书籍结构的对象 并让它保存多个 书籍 我设置的是一个数组 即定义 启动的对象 然而 每当我去测试我对指针的了解 实践有帮助 并尝试创建一个指向创建的对象的指针时 它都会给我错误 C Users Justin D
  • 如何得到将外力映射到广义力的矩阵?

    给定一个多体植物 我需要找到将外力 lambda 转换为广义力的矩阵 IE 以下方程中的 Phi 取自 Scott Kuindersma Frank Permenter 和 Russ Tedrake 的 稳定动态运动的有效可解二次规划 我的
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 无法匹配任何路线。 URL 段:'':尝试使用子路由和 Ng2 时

    I have 以下笨蛋 https plnkr co edit PHaGNtfa0fPBgET4NEpZ p preview 这是行不通的 为了让它发挥作用 我可以评论 RouterModule forRoot path component
  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET
  • AngularUI Router:在调用子状态时将 url 参数传递给“抽象”状态

    我想在调用子状态时访问抽象状态内的 url 参数 stateParam 我很想知道如何做到这一点 代码在笨蛋也 http plnkr co edit L0TXx3DCBOJmh4XydXbV p preview stateProvider
  • 网页抓取 - 如何识别网页上的主要内容

    给定一个新闻文章网页 来自任何主要新闻来源 例如时报或彭博社 我想识别该页面上的主要文章内容 并丢弃其他杂项元素 例如广告 菜单 侧边栏 用户评论 在大多数主要新闻网站上都可以使用的通用方法是什么 有哪些好的数据挖掘工具或库 最好是基于Py
  • Phonegap 图像未显示

    我无法让图像在我的phonegap 版本中正常工作 我读过绝对路径可能不起作用 所以我尝试了绝对路径和相对路径 但仍然没有运气 我包括这样的图像