parsing path variables from python(tornado) to javascript

Question

I have a code in python where I'm trying to send dynamic path of few images to javascript, but for some reason the '\\'(delimiter) gets removed. I'm trying to achieve this by sending one image at a time. I'm using tornado as python server and have javascript code with html.

server.py

import tornado.ioloop
import tornado.web
import time
import os

class one(tornado.web.RequestHandler):
    def get(self):

        self.write('Hello')

class Article(tornado.web.RequestHandler):
    def get(self):

        dir_path = os.path.dirname(os.path.realpath(__file__))
        dir_path=os.path.join(dir_path, 'images')
        file='2000px-Python-logo-notext.svg_.jpg'
        file=os.path.join(dir_path, file)

        var1 = 'Orignal_Appp'
        self.render('template.html', var=var1, file1=file)

application = tornado.web.Application([
    (r"/", one),
    (r"/articles", Article),
],debug=True)

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

template.html

<html>
<title>

</title>
<body>
<br>

<h1 align="center"> </h1>

<br>
<div id='div2' align="center">
<h4>{{var}}</h4>
</div>
<div id='div1' align="center" >

<p><img id="dynamicImg" src="" style="width:300px;height:300px;"/></p>

</div>
</body>

<script>
    var N = "{{ file1 }}";

    var img = document.getElementById('dynamicImg'); 
    img.src = N
    document.write(N)
</script>

</html>

The output of image path from "document.write(N)":

D:namanimagesimages0px-Python-logo-notext.svg_.jpg

It should be something like :

D:\naman\images\images\2000px-Python-logo-notext.svg_.jpg

Also if in server.py I pass 'images/2000px-Python-logo-notext.svg_.jpg' as hard coded path value instead of variable, it works fine. So, my understanding is javascript is parsing the path and removing the '\\' backward slash. I am pretty sure sure, its because of the backslash character, and I think this doesn't happen in flask. So it could be related to tornado, although I'm not sure. This might as well have a very common/general solution. let me know.

hard coded:

self.render('template.html', var=var1, file1='images/2000px-Python-logo-notext.svg_.jpg')

variable :

self.render('template.html', var=var1, file1=file)

I'm on windows 10, Python 3.7.3, tornado==5.1.1, but I would like to know about other platforms(linux) as well. Also, this may be a very common problem that I may have overlooked. I'm not sure. I looked around for this scenario and as well as other scenarios, but may be this question is duplicate, please direct me to the question with the solution, in such case. If anyone knows of any javascript function to overcome this issue Any information, help would be appreciative.

Thanks in advance!

Answer 1

var N = "{{ file1 }}"; gets turned into var N = "D:\\naman\\images\\images\\2000px-Python-logo-notext.svg_.jpg"; , and backslash is a special character in javascript strings.

You need to escape this string for use in a javascript string literal. Tornado's default escaping behavior is appropriate for HTML (where characters like angle brackets are special but backslashes are not). The simplest way to do this is to use the json_encode function (which will turn a python string into a javascript string):

var N = {% raw json_encode(file1) %};

Note that there are no quote marks here - json_encode is responsible for adding them.

Escaping is tricky - you should be sure to test your app with paths containing special characters including backslashes, angle brackets, whitespace, ampersands and plus signs.

parsing path variables from python(tornado) to javascript

Question

1 answers

solution1
1 ACCPTED 2019-08-09 01:42:08

parsing path variables from python(tornado) to javascript

Question

1 answers

solution1 1 ACCPTED 2019-08-09 01:42:08

solution1
1 ACCPTED 2019-08-09 01:42:08