(Solved) How to get Image URL

Ask the community
,
1

How to get the image URL I upload to wix the same a the image below ?

870×184 10.1 KB

'Cause I’m trying to copy the example hide and show.

Thank you!

2

urgently needs help!

3

Hi Chleo,
Add the image to your page and use console.log

console.log($w('#yourImage').src);

Then you can code the url
Good luck!
Roi

4

Hi Roi,

I’m new to this, could you please explain it more? and give some example?
Thank you!

5

Sure,

  1. Add an image to the page from the editor.
    2.Set the id of the picture to be: myImage
  2. Example of code:
$w.onReady(() => {
    console.log($w('#myImage').src);
});
  1. Click on the Preview and copy the path in the console.
    Done
    Roi
6

Thank you for your patience to reply Roi

7

:slight_smile:

8

Hi Roi,

One more thing,
Could you please look at this code, I copied it from the Example Code from wix hide and show

const collarImage = {
	yellow: "image://v1/df645c_9bb535bf7a334d449ed0b2924221bf2e~mv2.png/_.png#originWidth=1500&originHeight=672",
	red: "image://v1/df645c_527d6af6c489438caca4e33f83b1fa4b~mv2.png/_.png#originWidth=1500&originHeight=672",
	white: "image://v1/df645c_fb90327818f7463eb7174f7b18209fc1~mv2.png/_.png#originWidth=1500&originHeight=672",
	green: "image://v1/df645c_655b403e464f44789c6ec32eaaab326c~mv2.png/_.png#originWidth=1500&originHeight=672",
	orange: "image://v1/df645c_4baa769f9bb0444d9940492b331ac586~mv2.png/_.png#originWidth=1500&originHeight=672",
};

const collarColors = ['yellow', 'red', 'white', 'green', 'orange'];

function showCollar(collarcolor) {
	$w('#collar').src = collarImage[collarColors];
	// hide the selection buttons for other colors
	collarColors
		.filter(_ => _ !== collarcolor)
		.forEach(_ => $w(`#${_}Selected`).hide());
	$w(`#${collarcolor}Selected`).show();	
}



export function checkbox9_click_1(event, $w) {
	//Add your code for this event here: 
	showCollar('red');
}

export function checkbox7_click_1(event, $w) {
	//Add your code for this event here: 
	showCollar('green');
}

export function checkbox10_click_1(event, $w) {
	//Add your code for this event here: 
	showCollar('orange');
}

export function checkbox8_click_1(event, $w) {
	//Add your code for this event here: 
	showCollar('white');
}

export function checkbox6_click_1(event, $w) {
	//Add your code for this event here: 
	showCollar('yellow');
}
9

What is the question ?

10

No, I’m asking if you could look at this and give some advice to do it right. Sorry if it confuse you.
I want to copy the functionality of that example code to my website.

11

Well, Is it working ?

12

no. I don’t know what is wrong, I copy and change everything that matches my site, and I use checkbox not image

13

Can you please share a link to your site and specify the name of the page ?
Roi

14

Here it is Roi, it just a single page - https://editor.wix.com/html/editor/web/renderer/edit/e59190d7-a71b-4b09-a759-68b4282a2eb3?metaSiteId=f157fc7c-10d6-4ee0-b15c-4ce6e8e056dd&editorSessionId=FFE0F41E-3B1C-4D42-8FBE-CAA8857D8682&referralInfo=my-account

15

Hi Roi, for addition, I got a error in console log when I click a checkbox which the element I use.

634×556 40.4 KB

16

Hi Roi,

I already figure it out, and it’s now working perfectly. but I still get the error on the console log “.hide is not a function”
Thank you!

17

I got the same error, is there any explanation, why the error shows up?

18

Just wonder if there is an easy way that when a .pdf is uploaded by user, the web page can be refreshed automatically to show description of the file and a hyper link for open the file ? Or I have to check the url of the uploaded .pdf whenever I upload the .pdf and then do the setup myself each time (e.g. add items to repeater manually with the url of new file or add record to database manually and configure the url of the PDF) ?

19

Hi Guys. I am facing a similar issue. How do we extract the URL from the Image Source? Note that I need to put this URL onto a vectorimage (V1) as a link. All URL point to an Image sitting on Wix media. Therefore can I reference in this manner "/media…, right?

largeImage:
“wix:image://v1/191cb0_f769ca14baf64f79aa6f34810bca19a2~mv2.jpg/Sweet_Almond-5431.jpg#originWidth=900&originHeight=1800”
_id:
“7b969da8-f130-4759-8b78-f0eea67f767f”
_owner:
“191cb04a-824c-4e13-8ce2-a07a98293b0b”
_createdDate:
“2020-04-13T11:47:23.926Z”
swatch:
“wix:image://v1/191cb0_ef18e897ef494308824cf10b0d9afab6~mv2.png/5431-SweetAlmond.png#originWidth=120&originHeight=140”
_updatedDate:
“2020-04-18T07:48:18.835Z”
color:
“Almond”
designCode:
5431
title:
“SWEET ALMOND”

Above is my first row in the Dataset. I need to take the largeImage string, and probably take a substring and make something like this, right?
media/v1/191cb0_f769ca14baf64f79aa6f34810bca19a2~mv2.jpg
and pass it to V1 right?

Please help me.

In addition how do I get the link to open in a pop-up instead of a new window?
I have looked everywhere and cannot seem to find how an element can be tied up to a dataset with images?

20

Please add your issue as a new post with a link to refer back to this old post, rather than bumping up an old thread from 2018.

Old post being closed.