Source specified in Javascript not showing up in Django template

Question

Maybe this is a really dumb question, but I'm learning Javascript and Django and can't figure it out. I've spent a few hours on this and maybe it's a syntax error or something else.

I want to specify the source of an image in javascript and then display the image in Django HTML template. It's not working, even with simple images

Here is my javascript:

$(document).ready(function() {
        var image = document.getElementById("image").src('https://res.cloudinary.com/.../{{ object.id}}');
        }

Here is my image info:

<img src="#" id="image" class="mx-auto" width="250px" onerror='this.onerror = null; this.src="https://res.cloudinary.com/.../image.jpg"'/>

What am I doing wrong? It's definitely not working - the image is not showing up even when it exists. I either get the default image or no image.

The javascript is in the HTML file and this is what I have at the top of my file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Is the javascript in the html file or its own file? When you view source, does the javascript link (with object_id) look right and you can click on it and it brings you to the image you want? — getup8
– getup8, Commented Jun 30, 2021 at 5:16
It's in the HTML file. This code doesn't even work with no object_id and an image link that's fully specified. Nothing comes up to click on if there is no default image specified in the HTML. If I specify a default image i.e. the one error that will show up. — user10421193
– user10421193, Commented Jun 30, 2021 at 5:17
I think just an issue with your js in the way you set the image url, see my answer — getup8
– getup8, Commented Jun 30, 2021 at 5:23
Try : var image =$("#image").attr('src','https://res.cloudinary.com/.../{{ object.id}}'); — Swati
– Swati, Commented Jun 30, 2021 at 12:53

getup8 · Accepted Answer · 2021-06-30 05:22:41Z

2

Try changing your js:


document.getElementById('image').src = 'https://res.cloudinary.com/.../{{ object.id}}';

answered Jun 30, 2021 at 5:22

getup8

8,4582 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user10421193 Over a year ago

I tried this. The broken image picture comes up.

getup8 Over a year ago

And if you manually just put a url like this in there? https://via.placeholder.com/250

getup8 Over a year ago

Can you paste the actual img src that's in your javascript?

user10421193 Over a year ago

I'm loading the jquery script at the top, not javascript. Maybe that's my problem. How would I add the source in jquery?

getup8 Over a year ago

Why not just use vanilla JS? No reason to use jquery for that. But if you must, it'd prob be $('#image').src('')

Collectives™ on Stack Overflow

Source specified in Javascript not showing up in Django template

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related