Phonegap图像未显示 [英] Phonegap images not showing

问题描述

我无法在我的Phonegap版本中使用我的图像.

I'm having trouble getting my images to work in my phonegap build.

我读到绝对路径可能不起作用，所以我尝试了绝对路径和相对路径，但还是没有运气.

I've read that the absolute paths might not work so i've tried both absolute and relative paths, still no luck.

我包括了这样的图像:

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

或亲戚

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

等于

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

Col&图像是使用bootstrap-react的bootstrap helper组件.所有这些都可以在Web视图中正常运行，但在使用phonegap构建时则不能正常运行.但是，应该已经编译了源代码，并且在两种情况下都没有错误.

Col & Image is bootstrap helper components using bootstrap-react. And this all works fine in the web view, but not when built with phonegap. It should though, the source is already compiled and without errors in both cases.

以下是我的config.xml

Following is my 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="[e-mail]" 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可以正常工作.我不知道是什么原因导致其他图像无法正常工作.任何帮助将不胜感激！

Icon.png works fine though. I have no idea whats causing the other images to not work. Any help would be appreciated!

编辑

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

I've tried setting content-security-policy, if that was the issue that i weren't able to set img-src and display images via 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时会显示该文件.

There file is there, because when inserting an img-element into index.html it's displayed.

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

I even tried accessing it by the path that's displayed in the source folder running developer tools.

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

也不起作用，我开始认为phonegap已损坏，至少与react结合使用时效果很差.

Doesn't work either, i'm starting to think that phonegap is broken, atleast works very poorly in combination with react.

推荐答案

编译后， build.phonegap.com 将您的源文件放入"www"目录.

After compilation the build.phonegap.com put your source files into "www" directory.

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

You can access your local image file using the following path "/android_asset/www/"

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

如果图像位于根目录内的子目录中，则可以使用以下内容:

If your image is placed in a subdirectory inside the root direcctory then you can use the following:

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

注意:如果其中包含本地映像文件，请用您自己的替换"sub-direcctory".

Note: replace the "sub-direcctory" with your own if there is any in which the local image file is contained.

这篇关于Phonegap图像未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！