How to pass image pathname to Javascript from a view

Question

I'm learning how to pass information from a view to a modal. I can pass numeric and string data, but I don't

understand how to get the path for an image passed correctly. For example,

For the View:

<a class="product-button hintT-top" onclick="showpartial(@p.Id, @p.Price, '@p.Name', '@p.ImagePath1')" data-hint="Quick View" data-bs-toggle="modal" data-bs-target="#myBox">

Then for the javascript variable:

        document.getElementById("image1").innerHTML = ImagePath1;

And finally, for the modal:

<div class="product-zoom" data-image="image1" id="image1">
      <img src="image1" id="image2" alt="">
</div>

I'm guessing my syntax is wrong for the modal. The image doesn't show. How can I correct this?

Answer 1

Ping - thank you for your input and help! I didn't notice the type-o.

I discovered there were two (2) errors in my code:

1. The path for images needs to have two backslashs, but I had only one (\images\file.jpg should be:

\images\file.jpg).

1. I passed an ID number to Javascript, but in the modal I didn't have a placeholder for it. Once I provided

a div, it finally worked.

So I learned a huge lesson!