Accessing the image source from a variable using JavaScript in SharePoint Content Search

I'm currently developing a SharePoint 2013 Content Search Web Part. In the template, it extracts an image value in this manner:

var cswpiconURL = $getItemValue(ctx, "Announcement Image");

It returns an example image like this:

<img alt="" src="https://i4e7sptest.energyplaza.com/Style%20Library/Client/img/2014-09-6-Life-of-Pix-free-stock-photos-sunset-flares-summer-railway-Julien-Sister.jpg" width="498" style="BORDER: 0px solid; ">

I am attempting to create another variable below cswpiconURL that only captures the src from the image. Here is what I currently have, but it doesn't seem to be functioning.

var cswpiconURL = $getItemValue(ctx, "Announcement Image");
var cswpiconURLsrc = cswpiconURL.src;
javascriptsharepoint

Answer №1

After reviewing the guidelines, it seems that passing the selector can be done in the following manner:

var iconElement =  document.getElementById("_#= iconURL =#_");

This method should allow you to access the image source like this:

var iconURLsrc =  document.getElementById("_#= iconURL =#_").src;

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer №2

Give this a shot:

cswpiconURLsrc = cswpiconURL[0].getAttribute('src');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for automatically refreshing the browser when serving static assets through Express during development

Is there a way to set up automatic browser refresh when making changes to client files in ReactJS? I have an Express server sending static assets from the public directory on a GET request to "/". This is how my server code looks: const express = require ...

javascriptnode.jsexpress

Exploring the Power of Webpack and Web Workers within Ionic 2

In our upcoming Ionic 2 project, we are considering the implementation of web workers. However, due to the usage of ionic-app-scripts (version 1.0.0) with webpack in Ionic 2 (https://github.com/ionic-team/ionic-app-scripts), we face the challenge of having ...

javascripttypescriptwebpackionic2web-worker

Basic illustration of AJAX web-app, encompassing client and server components

Currently, I am immersing myself in the world of AJAX by tapping into online resources and delving into some informative books. While doing so, I discovered that AJAX is not exactly a groundbreaking technology in and of itself, but rather a method of lever ...

javascripthtmlajax

The validation feature is ineffective when used with Material UI's text input component

I need a function that can validate input to make sure it is a number between 1 and 24. It should allow empty values, but not characters or special symbols. function handleNumberInput(e) { const re = /^[0-9\b]+$/; const isNumber = re.test(e.target.val ...

javascriptreactjsregexvalidationmaterial-ui

Transform a value nested at any depth into an object key using Ramda or plain JavaScript

I have encountered a unique scenario while using a specific library. Instead of returning an array, this library returns nested objects with the final leaf node containing the value. For instance: red.walk.fast.true is returned as {red: {walk: {fast: &apo ...

javascriptobjectnestedmappingramda.js

Exploring the functionality of Vue.js Multiselect with data

After making a Mounted axios call, I have received some response data from the server which is quite promising. Now, I want to extract a specific part of this data to use as an option in a multiselect :options. Here is what my Vue component looks like: ...

javascriptvue.js

Resetting a JQuery button to its initial state

I have a button that, when clicked, rotates to 25deg thanks to Jquery. Now, I want it so that if I click the button again, it returns to its original position. Here is what I have tried: $(document).ready(function() { $(function() { ...

javascriptjquery

There appears to be an issue where the session object cannot be retrieved by the Struts2 action

I have a struts2 action that is invoked by a JavaScript function. The JavaScript function uses uploadify to enable multiple file uploads: <script type="text/javascript"> $(document).ready(function() { $("#fileupload").uploadify({ ...

javajavascriptajaxstruts2uploadify

Using Angular directive with ng-class to display or hide element

I am trying to implement a feature in my directive template where an element is shown or hidden on mouseenter. Below is the code for my directive: angular.module('myApp') .directive("addToRoutes",['$http', '$timeout', functio ...

javascriptangularjs

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

I'm currently stuck on developing a function that takes a string as an argument and outputs an object with this string as a key. For example (using pseudo code): test('bar') => {bar: ...} I am facing difficulties in ensuring the correct ...

javascripttypescripttypescript-generics

Is Angular Module Lazy Loading functioning properly in Chrome?

Is there a way to verify if the JavaScript files are lazy loaded for the currently opened module using Chrome developer tools? ...

javascriptangulargoogle-chromedebugginggoogle-chrome-devtools

Node.js video tag requests minimal data transfer on mobile devices

After creating a node server for streaming mp4 videos from a Mongo database using gridfs, I encountered an issue. The videos stream perfectly to desktop browsers, but when attempting to stream to a mobile device, the video player shows up, but the video do ...

javascriptnode.jsmongodbhtml5-videogridfs

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Could data be transmitted from the server to the client without appearing in network traffic?

I'm in the process of creating a drag-and-drop text game where players have to match correct pairs. Once they've matched all the pairs, they click a button to see how many they got right and wrong. The score is recorded, the boxes reset with new ...

javascriptnode.jsexpress

Creating a fresh discord.js v11.3 channel

I've been working on a ticket bot, but I'm encountering issues with my !new command. Can someone please assist me with this problem? I've been referring to Discord's documentation for guidance. Below is the code snippet I'm using: ...

javascriptnode.jsdiscorddiscord.js

Guide on using JSZip and VUE to handle an array of promises and store them in a local variable

My lack of experience with async functions has me feeling a bit lost right now... I'm attempting to loop through files in a folder within a zip file using JSZip, store these files in an array, sort them, and then save them to a local variable for furt ...

javascriptvue.jsasync-awaitpromisejszip

Automatically populating and submitting a form after receiving search results via ajax

I have been struggling with this issue for a few days now and could really use some help from the experts here. I am new to sql, javascript, jquery, ajax, css, and php. Although I studied Computer Science in college 15 years ago, I seem to be missing some ...

javascriptphpjqueryhtmlajax

Finding maximum values by key in Mongoose

Welcome to My Schema let schema = new mongoose.Schema({ property: String, numericValue: Number }, { timestamps: true }); In my database, I store various statistics like: let entryA = { property: "visitors", numericValue: 120 } let en ...

javascriptnode.jsmongodbmongoose

When utilizing the get method to invoke a JavaScript function, IE imposes a restriction of 2083 characters

I need assistance with passing a lengthy XML string to a JavaScript function. Currently, the process involves using an XSL file to generate HTML code which includes a link that triggers the function like this. <a href="javascript:myFunctionName('l ...

javascriptxmlinternet-explorerpostget

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql