Quiero cambiar el valor del atributo en el archivo index.html del archivo JavaScript externo vinculado a ese archivo HTML.
Tengo estructura de carpetas como: estructura de carpetas
Puedo proporcionar fácilmente la ruta desde el archivo html usando: {{url_for('static', filename='image_path')}}
Pero esto no funciona mientras se usa en un archivo JavaScript externo.
success: function (data) { var image_name = data["img_name"] var image_path = data["image_path"] // I have image_path and image_name ready but could not find the exact method to use this... // I want to use the image saved in "uploads" folder document.getElementById("uploadimg").setAttribute("src", {{url_for('uploads', filename='image_name')}}); }Entonces, ¿cómo puedo usar la ruta absoluta o image_name para cambiar la imagen en la interfaz? ¡Gracias!
Una técnica común utilizada por las páginas renderizadas por el servidor es crear un script JSON en su HTML y consultarlo desde el JS (externo).
Por ejemplo, en su servidor Flask, sería algo como:
import json # ... @app.route("/page") def page(): data = json.dumps({ "uploadImageUrl": url_for("uploads", filename="image_name") # you can include other data }) return render_template("page.html", data=data) Luego pega esto en tu etiqueta <head> :
<script type="application/json" id="data">{{ data }}</script> Tenga en cuenta que el navegador solo ejecuta JavaScript cuando está en una secuencia de comandos con tipo text/javascript (valor predeterminado si no se especifica), por lo que cuando agregamos application/json , el navegador simplemente dejará en paz nuestra etiqueta de secuencia de comandos de olor extraño.
En tu JavaScript externo podrías hacer algo como:
const data = JSON.parse(document.getElementById("data")); // somewhere else in your code: document.getElementById("uploadimg").setAttribute("src", data.uploadImageUrl);