0

I'm trying to load a picture inside a div (section1) after a mouseover event takes place and am having trouble getting it loaded.

I've tried many different approaches, most recently after reading Alacy's answer in Django {% static 'path' %} in javascript file I have my picture called as a variable inside tags in my HTML, with the rest of the javascript in an external file.

Here is all the relevant HTML I think:

...
<div id="section1"></div>
<img src="{% static 'images/image.jpg' %}"> //loads
...
<script>
  const pic="{% static 'images/image.jpg' %}"
  const hello="hello world" //test, uploads to section1 without problem
</script>
<script type="text/javascript" src="{% static 'javascript/file.js' %}"></script>

Here is my external js:

function populate_section1() {
  let output = "<img src=" + pic + ">";
  output += "<p>" + hello + "</p>";
  document.getElementById("section1").innerHTML = output;
};
document.getElementById("section1").addEventListener(
  "mouseover",
  populate_section1
);

Like I have noted, the img in the html loads fine, meaning the static file is being referenced normally, and 'hello' is loaded into 'section1' correctly, meaning the .js external file is communicating with the .html file fine. The only thing that doesn't get into 'section1' is 'pic'.

Anyone know what's up?

Forrest Goryl
  • 5
  • 1
  • 3

1 Answers1

0

I got my image displayed by using old-fashion file calling instead of django templates.

const pic = "static/images/image.jpg"
Forrest Goryl
  • 5
  • 1
  • 3