我目前正在开发一个chrome扩展，允许在用户发送单词时显示图片。我使用AJAX和JQUERY来获取图片。
我有一个问题，显示弹出中的图片。事实上，它在一个普通的html页面上工作，但在弹出窗口中不起作用。
如果你想测试:http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/pageHTML.html.
当我尝试在弹出窗口中显示图片时，我在JavaScript控制台出现了这个错误:
加载资源chrome扩展名失败://pmbnmemdpheopedlikgmdeegebojkoji/chamoix.png
我有一个小的图像图标，上面有一个裂缝，而不是图片。
我不认为这是图片路径的问题，因为它在我们的页面上工作(上面的链接)。
下面是我的代码:1。more_com.php(服务器上的php文件)
<?php
print "<p>Je suis un fichier php 2.0 !</p>";
$conn = mysql_connect("localhost", "groupe6pjt", "bfjrs2012") or die ("Connexion impossible");
$base="groupe6pjt";
mysql_select_db("$base") or die ("base inconnue");
$requete2 = "select imgSigne from signe where idSigne=10;";
$resultat2 = mysql_query($requete2) or die ("requete2 impossible");
while($tab = mysql_fetch_array($resultat2))
{
echo $tab[0];
echo "<br/><img src='"chamoix.png'" />";
}
?>
2。popup.html
<!DOCTYPE html PUBLIC>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="popup.js"></script>
</head>
<body>
<div id="bandeau">
<h4 style="color : white;">AIPS - Traduction LSF</h4>
</div>
<div id="obtenirTexte" class="well well-large">
<p><b>1)</b> Obtenir le texte surligné sur la page : </p>
<form class="form-search">
<div class="input-append">
<input class="span2 search-query" name="text" style="height : 30px; width : 175px;" type="text" id="text"/><button id="effacer" class="btn btn-primary" name="effacer" style="height : 30px;" title="Effacer le mot"><img src="effacer.png" alt="Erreur"/></button>
</div><br/><br/>
<button id="submit" class="btn" title="1) Texte">Obtenir le texte</button>
</form>
</div>
<div id="obtenirImage" class="well well-large">
<div id="commentaires">
<p><b>2)</b> Obtenir l'image correspondante : </p>
</div>
<form>
<input id="more_com" class="btn" type="button" value="Obtenir l'image" title="2) Image"/>
</form>
<div id="message">
<!-- PHP return here ! -->
</div>
</div>
<!-- As you can see with Chrome you can't put script directly in the htlm code so I create a file with my function : fonction.js -->
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="fonction.js"></script>
<script language="JavaScript" type="text/javascript" src="fonction2.js"></script>
<script language="JavaScript" type="text/javascript" src="popup.js"></script>
</body>
</html>
3。fonction.js
$(document).ready(function(){
$("#more_com").click(function(){ //Cette fonction se déclenche quand on clique sur le bouton d'id "more_com" (ici "Obtenir l'image")
var variableTest=$.ajax({
url : "http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/more_com.php", //Ca c'est la page PHP qu'on va devoir modifier pour qu'à la reception du mot elle affiche l'image correspondante (Ne pas changer !)
type : "GET", //On garde GET car on veut récupérer une donnée en envoyant des infos ( != POST )
//data : 'motRecher=' + COUCOU; // *****A MODIFIER***** //On va devoir utiliser ce champ pour envoyer le mot surligné vers la page PHP "more_com.php"
dataType : "html", //Le type de données renvoyé par la page PHP (ici : c'est du html que la page renvoie)
});
variableTest.done(function(data, textStatus, jqXHR){ //Si on atteind le fichier alors on affiche ce que retourne "more_com.php" (ici il retourne "Je suis un fichier PHP !")
$("#message").html(data); //Permet l'affichage du fichier PHP
});
variableTest.fail(function(jqXHR, textStatus){ //Si on atteind pas le fichier ...
$("#message").html("<p>Erreur</p>"); //...erreur
});
});
});
我认为Chrome阻止在弹出窗口中显示图片或类似的东西!
您遇到的问题是图像是这样定义的
<img src="./chamoix.png">
这个相对路径解析为
http://algec.iut-blagnac.fr/~groupe6pjt/testAjax/chamoix.png
在网页上，但试图解析到
chrome-extension://pmbnmemdpheopedlikgmdeegebojkoji/chamoix.png
中的扩展名。尝试使用绝对路径或replace()将其指向正确的地址。