2016-03-29 1 views
9

У меня возникли проблемы с получением моих изображений для работы в моей сборке телефонных разговоров.Телефонные картинки, не показывающие

Я читал, что абсолютные пути могут не работать, поэтому я пробовал как абсолютные, так и относительные пути, по-прежнему не повезло.

Я в том числе изображений, как это:

<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 & Изображение бутстраповские вспомогательные компоненты, использующие самозагрузки реагируют. И все это прекрасно работает в веб-представлении, но не при построении с помощью телефонного разговора. Однако в обоих случаях источник уже скомпилирован и без ошибок.

Ниже мой 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]" 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 работает отлично, хотя. Я понятия не имею, почему другие изображения не работают. Любая помощь будет оценена!

Редактировать

Я попытался установить контент-безопасности-политики, если это был вопрос, который я не удалось установить 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 сломана, по крайней мере работает очень плохо в сочетании с среагировать.

+0

Я добавляю тег загрузки. Это не похоже на Phonegap. – JesseMonroy650

+0

Как так? Изображения работают повсюду, кроме случаев, когда телефонная застройка создает приложение. Проблема не имеет ничего общего с загрузкой. – JazzCat

+0

Не согласен. Это НЕ проблема с телефонной связью. Если вы удалите бутстрап и используете стандартный HTML, изображения будут отображаться. Единственным исключением \ * мог \ * быть то, что изображения хранятся с устройства - это не так. Так как вы думаете, что умнее - лучше всего удачи. – JesseMonroy650

ответ

5

После компиляции build.phonegap.com поместите исходные файлы в каталог «www».

Вы можете получить доступ к локальному файлу изображения, используя следующий путь «/ android_asset/WWW /»

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

Если изображение помещается в подкаталог внутри корневого direcctory, то вы можете использовать следующие:

Примечание: замените «sub-directcctory» на свой собственный, если есть файл, в котором содержится локальный файл изображения.

+0

Спасибо! Я проверю и подтвержу, что изображения находятся внутри этого пути завтра. – JazzCat

+0

Конечно, просто попробуйте и дайте мне знать, если это сработает. –

+0

/android_asset/www/работал! Спасибо alot – JazzCat

2

Я добавил тег img в index.html и установил атрибут src на «images/logo.png», и он загружается без проблем.

... 
    <body> 
    <div id="root"></div> 
     <img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" /> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script src="js/vendor.bundle.js"></script> 
    <script src="js/app.bundle.js?v=2"></script> 
    </body> 
</html> 

У меня есть компонент реагируют с тега IMG и то же значение SRC «изображения/Logo.png»

... 
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; padding-top: 0px; letter-spacing: 0px; font-size: 24px; font-weight: 400; color: rgb(48, 48, 48); height: 64px; line-height: 64px; flex: 1 1 0px; text-align: center;"> 
    <img id="header-logo" src="images/logo.png" style="width: 105px; margin-top: 16px;"> 
</div> 
... 

IMG в компонент реакции не загружается; 404. И все же это соответствует истине

document.getElementById('footer-logo').src === document.getElementById('header-logo').src 

Как получается, что одно из изображений загружается, а другое нет? Связано ли это с компонентом реакции, который загружается в DOM динамически или реагирует на виртуальную DOM?

Атрибуты src равны file:///images/logo.png. Если установить атрибут Src на # заголовок-логотипе, как это, он загружает:

document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png" 

Надежда это дает больше информации для этого очень странного поведения.