How to get src link from a URL on a page?

Question

I have this URL http://mydomain/hr-attendance/auto-change-qrcode on my app. Then when I opened the URL, I will se an image that showing a QRCode.

When I look at the page source, I found something like this: There is a img tag inside, which is like this:

My question is not about the QRCode, but I want to ask, how to get the src link of the image (just one image on the page) from a page using URL?

This my snippet of code from where I want to get the data: The Odoo Pyton code that show make the link available:

@http.route('/hr-attendance/auto-change-qrcode', auth='user', type='http')
def auto_change_qrcode(self):
    hr_employee_qrcode_ids = secrets.choice(
        request.env['hr.employee.qrcode'].sudo().search([('state', '=', 'unused')], limit=1))
    secret = hr_employee_qrcode_ids.auto_change_qrcode()
    return http.request.render('aqur_attendance.attendance_qrcode', {'secret': secret})

And the is the snippet code of my javascript where I want to fetch the img src URL.

start: function () {
        var self = this;
        self.session = Session;
        var def = this._rpc({
                model: 'hr.employee.qrcode',
                method: 'search_read',
                args: [[['id', '=', 122003]]],
            })
            .then(function (hremplpoyeeqrcode){
                self.qrcode_secret = hremplpoyeeqrcode[0]['secret'];

                self.qr_code_url = self.session.url('/hr-attendance/auto-change-qrcode');
                self.$el.html(QWeb.render("AqurAttendanceQRCodeKioskMode", {widget: self}));
                self.start_clock();
            });

        setInterval(function () {
            $('.View').fadeOut('slow', function() {
                $(this).load('/echo/json/', function() {
                    $(this).fadeIn('slow');
                });
            });
        }, 3000); // refresh every 3000 milliseconds
    },

Step 1: Pick a place to run your JS. How you go about this is going to be significantly different if your program is running in (for example) Node.js vs a ` — Quentin, Jun 22 '22 at 08:30
Do you want to get the `src` without using a web browser ? If so, do you absolutely want to do it in `JavaScript` (you put the javacript tag) ? How do you want to get it ? In a chrome extension ? In an external app ? In you website since the URL is localhost ? — Marius ROBERT, Jun 22 '22 at 08:32
Hi Robert, I I want to get the link witihout open my browser. — Tri, Jun 22 '22 at 08:33
@Tri — It doesn't do much good to say "witihout open my browser" without telling us what you **are** using. — Quentin, Jun 22 '22 at 08:34
Hi Quentin, Short description, I need this for my Odoo app. I write a python controller that render a qr code on a URL. Then my Odoo javascript will get the image src link that contain qr code. — Tri, Jun 22 '22 at 08:37
@Tri so create some service that returns only the src may be use json, then use [fetch](https://stackoverflow.com/questions/25515936/perform-curl-request-in-javascript) and get that data — angel.bonev, Jun 22 '22 at 08:38
@Tri - your question is not at all clear to me: Are you trying to parse the QR embedded image? IF so you will need some type of js library to do that. — BenKoshy, Jun 22 '22 at 08:44
@Tri — I've never heard of Odoo before today. It seems it might be really relevant to the problem. Is it? Or is it generic Node/js or browser-side code as far as everything connecting to the outside world from inside the app is concerned? At a glance it looks like it has client-side and server-side components. You need to specify which one of those you are working in. Providing a bit of code around where you want to get the data would probably be useful context. — Quentin, Jun 22 '22 at 08:45
@BenKoshy — Given a URL to a web page, they want to use a framework I've never heard of before 10 minutes ago, to get the value of an attribute on an image element on the page at the URL. It isn't clear if they want to do it with client-side or server-side code or what server-side runtime the framework uses (if any). — Quentin, Jun 22 '22 at 08:46
Hi Quentin, I have edit my question and show the snippet of the code. — Tri, Jun 22 '22 at 08:49
@BenKoshy, no, I want to get the src link of the image, wheter it qr code or any image. — Tri, Jun 22 '22 at 13:47

score 1 · Answer 1 · answered Jul 08 '22 at 09:46

You Can Try that Code :-

<img src="myimage.jpg" id="img"><br>
<pre id="url"></pre><br>
<button onclick="GetURL()">See URL</button>
<script>
function GetURL() {

document.getElementById("url").innerHTML= document.getElementById("img").src;
}
</script>

score 0 · Answer 2 · answered Jun 22 '22 at 08:26

0

You can fetch the element using the document methods and get the src property.

For example:

const src = document.getElementById("myImg").src;
console.log(src);

<img id ='myImg' src="some-link">

answered Jun 22 '22 at 08:26

Ran Turner

14,906
5
47
53

1

They said they had the URL to the page, not that they were running the JS inside that page. – Quentin Jun 22 '22 at 08:27
Hi Ran, I have on the page, so my question is how to get the src link? – Tri Jun 22 '22 at 08:31
@Tri — Why are you repeating the question? You said that already. (If an answer misunderstands your problem then you need to explain what it misunderstood. If you don't understand parts of an answer then you need to engage with what the answer says. You can't just ignore it and repeat the original question without taking into account the context of the answer). – Quentin Jun 22 '22 at 08:31
Hi Quentin, have you understand now after I show my snipet of code? – Tri Jun 22 '22 at 09:36

How to get src link from a URL on a page?

2 Answers2