Estás planteando una pregunta de lo que se llama el problema xy, comenzaré por responder lo que estás preguntando:
No puedes escribir una ruta relativa que incluya el puerto, o cualquier otro elemento antes de la carpeta raíz del servidor web al que pertenece tu página.
En otras palabras: No puedes utilizar rutas relativas para lo que quieres lograr. (de allí la referencia al problema XY).
Hablemos de rutas relativas
Para obtener cualquier recurso, una ruta relativa significa justamente que comparte la raíz de la ruta del recurso que le hace referencia.
Hablando de URL's, lo más lejos que puedes llegar con una rutas relativas es a la carpeta raíz, que está más allá del dominio y de la posible especificación del puerto.
Si tu página está en la ruta:
https://www.midominio.com:9972/carpeta1/pagina2.html
Cualquier ruta relativa que escribas dentro del HTML de dicha página partirá de https://www.midominio.com:9972/carpeta1/
si la ruta no inicia con /
, o de https://www.midominio.com:9972/
si la ruta inicia con /
.
Esto tiene sentido, y es que cualquier ruta que no inicie con https://www.midominio.com:9972/
, en realidad, pertenece a otro servidor/servicio, y por tanto, no es relativa a https://www.midominio.com:9972/
.
Hablando de tu problema
Entiendo que tu:
- Tienes dos servidores web que tienen la misma estructura de carpetas, y quieres referenciar, en las páginas servidas por el primero, recursos ubicados en el segundo.
- Estas escribiendo páginas que, o bien se instalarán en distintos dominios/servidores y por tanto quieres una solución que se adapte a la dirección donde se obtuvo la página, ya que, en cualquier otro caso, sería mejor escribir rutas absolutas en cada imagen.
No puedes hacer esto con puro HTML, pero si pones un poco de javascript, podrías lograrlo (hasta cierta medida).
Por ejemplo, con javascript puro, puedes ponerle un id
a cada imagen y valerte de ese id
para ponerle, ya en tiempo de corrida, la dirección de la imagen, tirando también de los atributos de window.location, para obtener los datos de la URL desde donde se cargó la página, un ejemplo sencillo luciría como este:
function ponerruta(imagen) {
result = window.location.protocol
+ "//"
+ window.location.hostname
+ ":4450"
+ "/imagenes/" + imagen;
console.log(result);
return result;
}
window.onload = function() {
document.getElementById("img1").src = ponerruta("imagen.jpeg");
};
<img id="img1" src="/img/placeholder.jpeg"/>
Con esto, tendrías que tener una única imagen en /img/placeholder.jpeg
para que se muestre mientras se cargan las imágenes reales, proceso que comenzaría una vez se haya cargado la página completa en el navegador.
<img ... src="http://10.255.245.76:8090/ticketresource/img/imagen.jpg" ...>
de modo que el intérprete la toma tal cual la escribiste.