Trying to load a jpg onto a page based on a URL Parameter

Question

I have a site page (Wiki Page) that is re-used based on the URL Parameter that is sent when opening the page. The URL Parameter is used to filter out the contents of various document libraries and custom list on the page.

In addition, I would like to add code that will take this URL Parameter and lookup an item in a custom list to get a JPG image and replace the image that is currently on the page. (Or insert it in the upper left section of the page).

Any idea as to how I can accomplish this? Thank you in advance.

Answer 1

Since this site is now punishing students/users learning by rating homework questions as negative, I will rise above the "expert" users and post an answer to this homework. It took me a lot of time, because this is not my expertise.

I created a Script Editor web part with the following code:

<script type="text/javascript" src="../SiteAssets/js-enterprise/DisplayVirtualPicture.CEWP.js"></script>
<script type="text/javascript">
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadAll);
        function LoadAll()
        {getPicture();}
</script>
<img style="max-width:600px" title="undefined" src="https:xxxxxxx/SiteAssets/images/Blank.jpg">

The script DisplayVirtualPicture.CEWP.js is:

var currentID = GetUrlKeyValue('Name');
//console.log(currentID);

function getPicture() {
    var mytable = "";
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('VirtualPageLibrary');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>'+ currentID +'</Value></Eq></Where></Query></View>'); 

    var collListItem = oList.getItems(camlQuery);
    //clientContext.load(collListItem, 'Include(VirtualPicture, Title, Id)');
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(function () {
       var swListItms = collListItem.getEnumerator();
       while (swListItms.moveNext())
       {
           var swItm = swListItms.get_current();
           var mytable = swItm.get_item('VirtualPicture').get_url(); 
           //console.log("img="+mytable);
           $("img[title='undefined']").attr("src",mytable);
       }
       clientContext.executeQueryAsync(onQuerySucceededp,onQueryFailedp);
    },
    function (sender, args) 
    {
        console.log('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());
    });
}

function onQuerySucceededp(sender, args) {
    //console.log("success-1");
}
function onQueryFailedp(sender, args) {
    alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

It may not be the most efficient way of accomplishing this, but without the cooperation with expert users on this site, it's the best I can do.