Tengo una etiqueta img como esta
<img id="fish" src="">Y configuré y cambié el src de img a través de una función setInterval al azar
var randFish = Math.floor(Math.random() * 2); if(randFish == 0) document.getElementById('fish').src = "images/fish.png"; else if(randFish == 1) document.getElementById('fish').src = "images/fishbone.png";Este fragmento de código funciona bien y la ruta de la imagen se agrega con éxito al src, pero cuando trato de comparar si este src es igual a esa ruta, siempre devuelve falso
console.log(document.getElementById('fish').src == "images/fish.png"); //output: false console.log(document.getElementById('fish').src == "images/fishbone.png"); //output: falseCuando intento devolver en consola el src
console.log(document.getElementById('fish').src); //output: file:///C:User/Desktop/.../images/fishbone.pngUsar la ruta de la imagen de esta manera para comparar funciona, pero ¿por qué sucede esto? ¿Existe una solución inteligente que usar la ruta completa como "file:///C:User/Desktop/.../images/fishbone.png"?
const img_ = document.getElementById('img_'); img_.fish_ = ['fish.png', 'fishbone.png']; img_.path_ = 'images/'; img_.change_ = function(){ let random_ = Math.floor(Math.random() * this.fish_.length); img_.src = `${this.path_}${this.fish_[random_]}`; console.clear(); console.log(img_.src); } <img id="img_" src="" /> <button onclick="img_.change_();">Randomly change fish</button> <!-- / = Root directory . = This location .. = Up a directory ./ = Current directory ../ = Parent of current directory ../../ = Two directories backwards -->Esto se debe a que, como viste cuando intentaste
console.log(document.getElementById('fish').src); la propiedad element.src devuelve la URL completa del elemento. Lo que está buscando es el valor del atributo src . Así que prueba:
console.log(document.getElementById('fish').getAttribute('src') == "images/fish.png"); que debería devolver true .