> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/manipulation/.source.md).

# .source()

A Jscula method that provides a fast, easy and a more robust way to set and get image sources

source() is use to set and get image sources

### GET img src

To get the full Image source

```javascript
$('#img').source() // https://kuiperx.com/jscula/test/images/teacher.jpeg
```

To get the relative src exactly how it's was set in the code

```javascript
$('#img').source(false) // ./images/teacher.jpeg
```

***

### SET img src

Setting a new img src

```javascript
$('#img').source("images/student.png");

$('#img').source("https://kuiperx.com/jscula/test/images/student.png");
```

### A Callback Function for source()

The **J**scula method `source()`, also comes with a callback function. The callback function has two parameters:

* The original (old) src Object which contains
  * `fullSrc`: the long/complete path.
  * `src` : the path exactly as it was set in the code

You then return the string you wish to use as the new image src from the function.

The following example demonstrates `source()` with a callback function:

```javascript
$("button").click(function(){ 
  $("#img").source(function(srcObj){ 
    return '../'+srcObj.src; 
  }); 
}); 


//you can destructure the srcObj 
$("button").click(function(){ 
  $("#img").source(function({fullSrc,src}){ 
    return srcObj.fullSrc.trimStart('https://'); 
  }); 
});
```

{% hint style="info" %}
📝 Note: Your function should return a string to be set at the end of the day 🤠
{% endhint %}