Estoy tratando de crear un sitio web/página donde el usuario pueda mostrar su foto de Instagram deseada desde una URL, todavía estoy aprendiendo y ya tengo un pequeño comienzo aquí:
HTML:
<img id="myImage" /> <input id="imageUrl" type="text" value="https://www.instagram.com/p/CUVZs0YP6kl/" placeholder="placeholder"> <button id="loadButton">Load image</button> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#loadButton').on('click',function(){ $("#loadButton")[0].play(); }); $('#loadButton')[0].click(); }); </script>JavaScript:
const imageFrame = document.getElementById('myImage'); const imageUrlInput = document.getElementById('imageUrl'); const loadButton = document.getElementById('loadButton'); loadButton.addEventListener('click', loadImage); function loadImage() { imageFrame.src = imageUrlInput.value; }Pero no muestra la imagen, y quiero ocultar "https://www.instagram.com/p/" para que el usuario solo tenga que escribir la parte "CUVZs0YP6kl" del enlace en el cuadro para obtener la imagen mostrada en la página; No sé cómo haría eso en JavaScript, así que necesito ayuda.
Agrega una cadena:
const imageFrame = document.getElementById('myImage'); const imageUrlInput = document.getElementById('imageUrl'); const loadButton = document.getElementById('loadButton'); loadButton.addEventListener('click', loadImage); function loadImage() { let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/"; imageFrame.src = instaUrl; } <img id="myImage" src="" alt="Image will show here..." /><br> <input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL"> <button id="loadButton">Load image</button> Además, https://www.instagram.com/p/CUVZs0YP6kl/ es una página HTML que muestra la imagen.
No es un tipo MIME de imagen válido.
Si desea mostrar la página, puede usar iframe , object o embed :
const imageFrame = document.getElementById('myImage'); const imageUrlInput = document.getElementById('imageUrl'); const loadButton = document.getElementById('loadButton'); loadButton.addEventListener('click', loadImage); function loadImage() { let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/"; imageFrame.src = instaUrl; } <iframe id="myImage" src=""></iframe><br> <input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL"> <button id="loadButton">Load image</button> u object :
const imageFrame = document.getElementById('myImage'); const imageUrlInput = document.getElementById('imageUrl'); const loadButton = document.getElementById('loadButton'); loadButton.addEventListener('click', loadImage); function loadImage() { let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/"; imageFrame.data = instaUrl; } <object id="myImage" type="text/html" data=""></object><br> <input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL"> <button id="loadButton">Load image</button>