Estoy tratando de crear una etiqueta de imagen para una plantilla de Jinja con una variable de Ajax.
success: function (response) { var pythonResponse = "<ul id='userList'>"; $.each(response,function(index,value) { console.log(`path is ${value[0]}`) pythonResponse += `<li onClick = 'selectUser("${value[1]}")'> ${value[1]}` pythonResponse += `<img src={{ url_for('static', filename='${value[0])}')}}/></li>` console.log(pythonResponse); });La linea en cuestion es esta
pythonResponse += `<img src={{ url_for('static', filename='${value[0])}')}}/></li>` Cuando ejecuto este código, el value[0] que contiene la ruta del archivo, se representa como un montón de galimatías. Así es como se ve %24%7Bvalue%5B0%5D%29%7D/ pero debería verse así /myfolder/myFile.jpg . He confirmado que la variable es igual a lo que se supone que es igual y si codifico la ruta del archivo en el filename='' entonces funciona. ¿Por qué esta variable se convirtió de /myfolder/myFile.jpg a este %24%7Bvalue%5B0%5D%29%7D/ ?
El orden de aplicación aquí es algo confuso. Si entiendo correctamente que el javascript se está aplicando primero, entonces la respuesta a continuación debería ayudar.
Jinja está escapando de tu variable por seguridad. Es posible introducir problemas de seguridad en sus aplicaciones usando una variable de la forma en que la está usando aquí. Para obtener información, busque ataques XSS (cross site scripting) para obtener más información.
Si está seguro de que la variable es segura, Jinja le permite evitar esta codificación con el filtro safe .
pythonResponse += `<img src={{ url_for('static', filename='${value[0])}') | safe}}/></li>`