9
votes

Images de téléphonie non montrant

J'ai des difficultés à faire fonctionner mes images dans ma construction téléphonique.

J'ai lu que les chemins absolus pourraient ne pas fonctionner, donc j'ai essayé des chemins absolus et relatifs, toujours pas de chance. P >

Je comprends les images comme ceci: p> xxx pré>

ou relative p> xxx pré>

est égal à p>

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


14 commentaires

J'ajoute la balise bootstrap. Cela ne semble pas être lié à la téléphonie.


Comment? Les images fonctionnent bien partout, sauf lorsque PhoneGap construit l'application. Le problème n'a rien à voir avec Bootstrap.


Être en désaccord. Ce n'est pas un problème de téléphonie. Si vous retirez le bootstrap et utilisez Standard HTML, les images apparaîtront. La seule exception * pourrait * être que les images stockent le périphérique - ce qui n'est pas le cas. Depuis que vous pensez que vous êtes plus intelligent - bonne chance.


Le HTML est Standard HTML, il est compilé. Je suis désolé si cela n'était pas clair. Mais vous devez savoir que si vous avez construit une application PhoneGap d'un repo git.


Si vous n'avez pas de commentaires ou de conseils constructifs. Ne vous inquiétez pas.


J'ai eu un conseil - comme une suggestion. Bonne chance. Je ne répondrai plus plus loin.


"Essaye encore" ... :) Je vais avoir ce problème avec deux projets différents et j'ai essayé de multiples approches pour tenter de résoudre ce problème, seule que je peux penser, c'est que quelque chose dans le fichier CONFIG.XML manque à ce que rend les images non accessibles.


donnez-moi 20 minutes


Je ne peux pas trop insister que vous devez repenser votre processus. Source Github.com/jessemonroy650/try-Image-loDoad Démo de travail - Android Build.Phonegap.com/apps/1996356/ Partager


Je suis également capable de montrer des images de cette façon, en plaçant les éléments à l'intérieur de l'index.html, mais en utilisant les composants de réagisme qu'il ne fonctionne pas. Le code devrait être le même que le second est généré avec JavaScript.


Je ne peux pas trop insister, vous devez repenser votre processus. Bonne chance


Repenser mon processus, arrêtez-vous d'utiliser React et PhoneGap ensemble? Qu'est-ce que tu essayes de dire?


Encore une fois, arrêtez de répondre si vous avez une entrée avec une valeur réelle.


(Kay. Prendre votre suggestion. Fait. Bonne chance.


3 Réponses :


6
votes

Après compilation, build.Phonegap.com Placez vos fichiers source dans le répertoire "www".

Vous pouvez accéder à votre fichier image local à l'aide du chemin de page suivant "/ android_asset / www /" xxx

si votre image est placée dans un sous-répertoire à l'intérieur du Directeur racine, alors vous Peut utiliser ce qui suit: xxx

Remarque: Remplacez le "Sous-DirecCCTORY" avec le vôtre s'il y en a une autre dans laquelle le fichier d'image local est contenue.


4 commentaires

Merci! Je vais vérifier et confirmer que les images sont à l'intérieur de ce chemin demain.


Bien sûr, donnez-lui juste un essai et laissez-moi savoir si cela fonctionne.


J'ai le même problème en utilisant réagir avec PhoneGap, et cette solution de contournement fait l'affaire, mais pourquoi avez-vous besoin d'avoir la configuration SRC comme ça? Je comprends que / android_asset / www est physiquement lorsque PhoneGap place les dossiers / actifs, mais si j'agite du codes HTML, l'élément IMG (HTML) en dehors de l'espace rendu réagissant, en utilisant le SRC de l'IMG sans / android_asset / www, traverse Wonderes, qui me conduit à penser que pour une raison quelconque, réagirait quelque chose de bizarre avec les chemins


Ce que je pense, c'est que le HTML est injecté dans la page via JavaScript et similaire à la définition d'une URL d'image d'arrière-plan Le chemin d'accès à l'image est relatif à l'endroit où le fichier CSS est. J'ai essayé d'utiliser un chemin relatif dans mon webpack.config mais cela n'a pas fonctionné. Je pense que les chemins absolus pour réagir la valeur IMG SRC peuvent être le seul moyen d'y aller.



2
votes

J'ai ajouté une étiquette IMG à index.html et définissez l'attribut SRC sur "Images / logo.png" et il se charge sans problème.

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


0 commentaires

0
votes

J'espère que cela aide. Donc, j'ai aussi eu le problème.

Ce que j'ai fait était, était de créer un autre dossier / images / Utilisez mes images que j'ai importées via réagir via mon / statique / composants / images code> dossier. Vous pouvez le prendre un peu plus en ajoutant des conditionnels à la mise en scène ou en direct. P>

donc la réponse est là.:

import React, { Component } from 'react';
import Logo from '../images/logo.png';

class Header extends Component {
    render() {
        return(
            <div className="logo mt-3">
                <img src={`./${Logo}`} alt="Logo" />
            </div>
        );
    }
}

export default Header;


0 commentaires