Discussion :

[francky74]

Bonjour,

Je suis en train de développer des services REST. J'utilise, côté client, des pages HTML avec Bootstrap, JQuery et angular uiRouter. Côté serveur, j'utilise Tomcat 8.5 avec une BDD postgresql.

Je désire afficher des photos dans un tableau mais cela ne fonctionne pas et lorsque j'inscris seulement l'url de la photo dans la fenêtre d'URL du navigateur pour faire un test, j'obtiens le message d'erreur suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

l'image ne peut être affichée car elle contient des erreurs

Le client reçoit l'url en format json et le HTML est contitué de la manière suivante (ligne 28) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table class="table table-stripped">
	<thead>
		<tr>
			<th><B>Photo</B></th>
			<th  ng-click="sortData('photo_user_id')">
				<B>User</B>
        		<div ng-class="getSortClass('photo_user_id')"></div>
			</th>
			<th  ng-click="sortData('photo_country')">
				<B>Country</B>
        		<div ng-class="getSortClass('photo_country')"></div>
			</th>
			<th><B>Coord</B></th>
			<th  ng-click="sortData('photo_date')">
				<B>Date</B>
        		<div ng-class="getSortClass('photo_date')"></div>
			</th>
			<th><B>Moderation</B></th>
			<th  ng-click="sortData('photo_likes')">
				<i class="glyphicon glyphicon-heart"></i>
        		<div ng-class="getSortClass('photo_likes')"></div>
			</th>
			<th><B>Actions</B></th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="photo in photosList | orderBy:sortColumn:reverseSort">
			<td><img src="{{photo.photo_filename}}" alt=""></img></td>
			<td>{{photo.photo_user_name}}</td>
			<td>{{photo.photo_country}}</td>
			<td>lat:{{photo.photo_latitude}}, lon:{{photo.photo_longitude}}</td>
			<td>{{photo.photo_date}}</td>
			<td>{{photo.photo_moderation}}</td>
			<td>{{photo.photo_likes}}</td>
			<td>
				<button class="btn btn-default btn-sm"
				ng-click="modif_photo()"><i class="glyphicon glyphicon-pencil"></i></button>
				<button class="btn btn-danger btn-sm"
				ng-click="suppr_photo()"><i class="glyphicon glyphicon-trash"></i></button>
				<button class="btn btn-default btn-sm"
				ng-click="see_photo()"><i class="glyphicon glyphicon-eye-open"></i></button>
			</td>
		</tr>
	</tbody>
</table>

et voici une partie du code source de la balise IMG :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<tbody>
			<!-- ngRepeat: photo in photosList | orderBy:sortColumn:reverseSort --><tr class="ng-scope" ng-repeat="photo in photosList | orderBy:sortColumn:reverseSort">
				<td><img src="127.0.0.1:8080/API/img/cat.jpg" alt="" ></td>
				<td class="ng-binding">francky</td>
				<td class="ng-binding">France</td>

et voici le JSON que reçoit le client (les données sont factices):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"photosList":[{"photo_id":1,"photo_filename":"127.0.0.1:8080/API/img/cat.jpg","photo_user_id":1,"photo_user_name":"francky","photo_country":"France","photo_latitude":20.0,"photo_longitude":12.1000004,"photo_moderation":true,"photo_likes":136,"photo_date":"2016-12-19"},{"photo_id":2,"photo_filename":"127.0.0.1:8080/API/img/turtle.jpg","photo_user_id":2,"photo_user_name":"Matthieu","photo_country":"France","photo_latitude":24.0,"photo_longitude":32.0,"photo_moderation":true,"photo_likes":123,"photo_date":"2016-12-15"}]}

Je suis sûr du chemin d'accès à mes photos car j'ai vérifié dans le webapps de Tomcat.

Lorsque j'ouvre les photos directement depuis le disque dur (c'est à dire dans le dossier qui se trouve dans Tomcat), je peux les ouvrir sans problèmes.

Merci pour votre aide !

[francky74]

Il semblerait que mon problème soit plutôt dans Tomcat car je viens de voir dans le fichier de log 'localhost_access_log.2017-01-04.txt' le message suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

127.0.0.1 - - [04/Jan/2017:11:14:13 +0100] "GET /API/img/cat.jpg HTTP/1.1" 404 -

Pour récolter ce message, j'ai appelé la photo directement en saisissant l'URL dans la fenêtre d'URL du navigateur.

En fait le serveur voit la demande puisque je le retrouve dans le log mais il me renvoie une erreur 404.

De plus, je viens de taper dans le navigateur l'URL en passant par le système de fichiers et là, je vois mon image qui s'affiche dans le navigateur !

Quelqu'un a une idée de mon problème ?

Merci,

[francky74]

Bonjour,

En fait, je me rends compte que c'est un problème de mon serveur qui ne crée pas un bon URL pour la photo !