How to link a picture in flask through javascript?

I am trying to add a picture to a card in javascript in a way that looks like this:

console.log(account_name);
document.getElementById("list_of_datasets").innerHTML += `
                <div class="col-lg-4 d-flex align-items-stretch">
                    <!--CARD BEGIN-->
                    <div class="card w-100" style="width 18rem" >
                        <img src="{{url_for('static', filename='#UserData/' + account_name + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

                        <div class="card-body">
                            <h1 class="card-title">${account_name}</h1>
                            <h2 class="card-title">data_set title</h2>
                            <h3 class="card-title">go to page</h3>
                            <p class="card-text">probably going to be a description</p>
                            <button class="btn btn-outline-danger btn-lg">download</button>
                        </div>
                    </div>
                    <!--CARD END-->
                </div>`

The error I get is "jinja2.exceptions.UndefinedError: 'account_name' is undefined" however the google log shows that it does exist, and I suspectthis has something to do with how flask wants its images entered in.

When I hardcode the account name it works fine.

When I am in the html body instead of JS script and use the code below it works fine:

<img src="{{url_for('static', filename='#UserData/' + account_name + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

But then I can't assign it dynamically based on username, could someone help me figure out how to do this?

EDIT: THIS ALSO DOES NOT WORK:

<img src="{{url_for('static', filename='#UserData/' + ${account_name} + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

Thank you