Cannot pass in a link to the image as prop

Plasmic Studio Questions
1

Hey guys, below is our design, along with props but in code I struggle to pass in just the link to the image as a prop. Looked trough the docs and examples and didn’t find a code version on how to do this. Any thoughts as to what is being done wrong?

image.png
image.png1784×880 263 KB

image.png
image.png1305×531 45.8 KB

2

Hi! I believe it should be:

mapImage={{
  render: () => <MapImage ... />
}}

(you can find more about render and other element overrides here: https://docs.plasmic.app/learn/overrides/#override-props-in-code )

3

(alternatively you could convert map image to a slot, and then it would work just like you did in code)

4

hmm, interestingly if you look the top component in the screenshot it works well without render, however I’ve tried below to no avail

mapImage={{
    render: () => <MapImage
        cityImage={'<https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80>'}
    />
}}
5

i’ll try with a slot but it’s really odd that you can’t just reference the image and pass in the source

6

oh oops sorry, if you just need to pass a prop you should be able to do it like so (render and slot would replace the element entirely):
• Add a name to the Map image element (right now the parent is named map image but not the component instance)
• Then provide the props override to it in code

mapImageInstance={{
  props: { cityImage: "https://..." }
}}

Please LMK if the above helps

7

hmmm it sounds like it should but it does not - here is the screenshot

and the code is

mapImageCity={{
    props: { cityImage: "<https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80>" }
}}

image.png
image.png1721×501 171 KB

8

hmmm yeah that looks correct… I noticed the image in the MapImage component is not linked to the city image prop (so the prop would be passed to the component but not be used). Does it work if you link the image to the prop? You can do so by clicking on the root element of MapImage and right-clicking on the image in the right pane:

image.png