Code Monkey home page Code Monkey logo

Comments (8)

Yuyz0112 avatar Yuyz0112 commented on August 22, 2024 2

Sure, the relative to absolute transform was done in the full snapshot phase, which belongs to the rrweb-snapshot repo.

Looks like we can handle the srcset attribute with some parae and transform work either.

from rrweb.

xavierh81 avatar xavierh81 commented on August 22, 2024

Sure, the relative to absolute transform was done in the full snapshot phase, which belongs to the rrweb-snapshot repo.

Looks like we can handle the srcset attribute with some parae and transform work either.

Ok perfect ! I need to post the issue on the good repo then?

from rrweb.

xavierh81 avatar xavierh81 commented on August 22, 2024

In the same way, I have discovered another problem with relative URL on images.

Screen Shot 2019-04-05 at 16 51 39

As you can see, images in inline style are not converted into absolute path. Then in the replay, the image is not visible.

Maybe I need to post this on snapshot git repo ?

from rrweb.

IMFIL avatar IMFIL commented on August 22, 2024

Any news on this ?

from rrweb.

xavierh81 avatar xavierh81 commented on August 22, 2024

@IMFIL It's not a clean way at all, but here you can find my "temporary" fix for that.

srcset_fix.txt

PS: It seems that there is a limitation to the length of text that can be put in code part. So you will find the code in attachement

from rrweb.

IMFIL avatar IMFIL commented on August 22, 2024

@xavier-heysch I would love to help you out on a PR to RRWeb so that everyone can benefit from this. @Yuyz0112 would you be open to this change ?

from rrweb.

IMFIL avatar IMFIL commented on August 22, 2024

Thanks for the share @xavier-heysch.
Triple ` will let you to put longer code as a comment.

// Start the record
var options = {
    maskAllInputs: true,
    emit: function (event) {
        var json_event = JSON.stringify(event);
        try {
            // Fixing srcset issue with relative URLs
            // Browse all occurences of srcset starting with relative URLs
            while (json_event.indexOf('"srcset":"/') !== -1) {
                var srcset_index = json_event.indexOf('"srcset":"/');

                var srcset = json_event.substring(srcset_index + 10, json_event.indexOf('"', srcset_index + 10));

                var srcset_splitted = srcset.split(',');
                var srcset_splitted_fixed = [];
                for (var i = 0; i < srcset_splitted.length; i++) {
                    var srcset_item = srcset_splitted[i].replace(/(\\n)/g, ' ').trim();
                    if (srcset_item.indexOf("/") == 0) {
                        srcset_item = location.protocol + '//' + location.host + srcset_item;
                    }
                    srcset_splitted_fixed.push(srcset_item);
                }
                var srcset_fixed = srcset_splitted_fixed.join(', ');

                // Clean previous srcset and replace it with the fixed one
                json_event = json_event.substring(0, srcset_index + 10) + srcset_fixed + json_event.substring(json_event.indexOf('"', srcset_index + 10));
            }
        }
        catch (exc) {
            // Reset json event 
            json_event = JSON.stringify(event);
        }

        events_list.push(JSON.parse(json_event));
    }
};

from rrweb.

Yuyz0112 avatar Yuyz0112 commented on August 22, 2024

I think @IMFIL 's patch already impl this.

from rrweb.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.