将图像转换为Data URI Base64时出现问题

Question

I'm trying to convert an image located on a server to a Data URI. When I pass through the exact url location it converts fine. I need to be able to pass through the filename as a variable however when I do it returns with a base64 for data:text/html not data:image/jpeg.

Any help is appreciated!

    function toDataURL(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

//Works Here
    toDataURL(`/attachments/HouseLandPackage/FloorPlans/Floorplan.jpg`, function(dataUrl) {
            UserSelection.FloorPlanBase64 = dataUrl;
        });

//Doesn't work here (Floorplan = Floorplan.jpg in this)
    toDataURL(`/attachments/HouseLandPackage/FloorPlans/${Floorplan}`, function(dataUrl) {
                UserSelection.FloorPlanBase64 = dataUrl;
            });

Answer 1

Try

toDataURL(`/attachments/HouseLandPackage/FloorPlans/${Floorplan}`, function(dataUrl) {
                UserSelection.FloorPlanBase64 = dataUrl;
            });

You should use ${variableName} instead of just {variableName} with backticks