[Answered] $w.Image -> Setting src

Ask the community
,
1

Hey guys. I see I can set the src of an image with ‘https://’ or ‘image://’ where the later would be an image from the media manager. So in my media manger, within the folder ‘trails’ I have an image ‘002.jpeg’. It is visible in ‘site media’, where this wasn’t the case if it was ‘jpg’. Now I want to set the image source through the api.

If I set it with ‘$w(“#img”).src = “https://…”’ the image displays. Now this is nice, but means I have extra actions to take to get that url. I would like to use the method '$w(“#img”).src = “image://trails/002.jpeg” but for some reason that results in the error:

Wix code SDK error: The “src” property cannot be set to “image://trails/002.jpeg”. It must be a valid URL starting with “http://”, “https://”, or “image://”.

What is the correct syntax to set it?

In addtion, when you add an ‘image’ to the database, are you storing then link in the database or the image itself, for then my answer is solved for I’m going to link it to database data

2

Hi Edgar,
Check out this for the right syntax

Second, connecting an Image element to database will display your image,
If you wish to receive a link to the picture you can use:

 import wixData from 'wix-data';
 
 wixData.query("yourCollection")
  .find()
  .then((results) => {
    const firstItem = results.items[0]
    const linkToImage = firstItem.yourImageFieldKey // linkToImage is a string with the url to you image. Good for "$w('yourImage').src = linkToImage" 
  );

Good luck!

3

HI Roi, thanks for the info.

I read that document for getting the url. It’s very clear on getting the ‘https’ method. Just get URL with inspect element. What it isn’t clear on is the naming of the ‘image’ method. It says the image is to be in the media manager, but I can’t seem to get the right ‘image://’ for an existing image.

The database part I understand. It is exactly what I was going to do. I just wonder if you choose ‘image’ as datatype, it will store the image in the database or not. This for when you click the ‘plus’ it comes with the media manager and you can then choose an existing or upload. If you upload it’s always available.

4

There is another option,
Right next to the “plus” sign there are three dots, click on it and you’ll have an option to enter an image URL

5

Okay. I looked into this. My guess is the database is storing a url. You can only link and image type to the image so that must be right.

6

Hello Edgar,
did you resolve this issue ? if so, can you please share your syntax ?
I manually insert the image in the database, click on the three dots and retrieve the URL. However when I set the image source equal to that URL, I’m still getting a similar error as you but my string is empty instead (see error message below):

wix code
$w(“#image1”).src =“image://imareURL”;

Error message
Wix code SDK error: The “src” property cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or “image://”.

7

I know this is gonna sound odd but believe it or not I am having the very same issue. Both in understanding and usage. In my collection, it says in the … replace image with url but when I do that, the interface flags the cell of the collection with a red line indicating something is wrong then it says the option to change to image. Whats going on here? All I want to do is hook my image repository in Box to my wix site so I dont have to access the wix site to change the images showing in my gallery; all I have to do is drag new images to replace existing images in my box folder.