Incorporating S3 images into vanilla JavaScript within a Django storages environment

I am facing a simple issue that I cannot seem to resolve. I have configured Django storages to serve static files from S3. In my template, I define the image source like this:

"{% static 'fun_share/img/logo/logo.svg' %}"

with

STATIC_URL = "/static/"

Django storages handles the actual translation of the img src, resulting in . So far so good.

Now, I want to change the image src from plain javascript to a different image (logo-2.svg).

What is the best approach to accessing the s3 bucket with the correct URL (taking into account secrets and keys)?

I tried using

 const logo = document.querySelector(".navbar-brand img");
 logo.src = "/static/fun_share/img/logo/logo-2.svg";

but it doesn't work as expected, as the javascript call is made to the server itself rather than being redirected to the s3 bucket.

Any assistance would be greatly appreciated.

javascriptdjango

Answer №1

To transform the existing source into a URL, simply adjust the pathname to obtain a URL with the same host and query parameters.

const logo = document.querySelector(".navbar-brand img");
let sourceUrl = new URL(logo.src)
sourceUrl.pathname = '/static/fun_share/img/logo/logo-2.svg'
logo.src = sourceUrl.toString()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

I am currently working with Bootstrap 5 (Beta 3 - no JQuery) on a static website, and I am facing the challenge of making a navbar link appear active. I prefer to achieve this using JavaScript instead of creating a separate navbar for each page. For instan ...

javascriptbootstrap-5

Rearrange the array so that any empty values are placed at the end

I am trying to arrange all empty values at the end of an array. The code below demonstrates my attempt: 1) This code moves all empty values to the end of the array, but it does not sort the other values accordingly. var dateArray = [ '',&apos ...

javascript

Deactivate the backface culling feature when loading an imported .obj file in three.js

I'm struggling with disabling wireframe rendering on the rear side of my vehicle. Any ideas on how to deactivate backface culling in wireframe mode for three.js? Check out this link for a helpful image ...

javascriptthree.js.objwireframe

Mobile device experiences shader malfunction

On my laptop, this shader works perfectly fine. However, I'm facing issues on mobile devices and suspect that it might be related to precision settings. Here is the error message I'm encountering: THREE.WebGLProgram: shader error - 0 35715 fals ...

javascriptthree.jsshaderwebgl

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...

javascripthtmlhighcharts

Using a jQuery dialog to launch a popup window specifically optimized for Safari browsers

I recently encountered an issue with my plain JavaScript function that opens a pop-up window. It functions perfectly in Chrome and Firefox, but I faced difficulty in Safari due to the default popup blocker preventing the page from opening without any err ...

javascriptjquery

Top Fabric scripts to enhance your Django projects

What are some recommended stock Fabric scripts for deploying a typical Django project? While Fabric appears promising, it seems to necessitate creating a deployment script from the ground up. Switching over from Capistrano, I prefer starting with a solutio ...

djangodeploymentfabric

Alert: The lack of boundary in the multipart/form-data POST data has been detected in an unknown source on line

I am currently developing a file uploader that uploads an image when the input changes. Here is the code for my HTML form: <form method="post" enctype="multipart/form-data"> <input name="uploaded[]" type="file" id="file_upload"/> </for ...

javascriptphpajaxhtmlxmlhttprequest

Trouble linking JavaScript and CSS files in an Express App

Could someone assist me in understanding what is causing my code to malfunction? Why is it that my javascript and css files do not execute when the server sends the index.html file to the browser? I have a simple setup with an html page, javascript file, ...

javascriptnode.jsexpress

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascripthtmlcssword-wrap

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events: Before dragging the image: https://i.sstatic.net/C6JSM.png After dragging the image, it fails to display: https://i.sstatic.net/7Du0 ...

javascriptcsshtml

In what ways can I enhance and visually improve JSON data using a jquery/javascript plugin?

My current project requires me to display JSON data received from the backend in a textarea. However, the data comes unformatted and not validated. Now I'm facing two main challenges: 1) How can I beautify the JSON content in the textarea? 2) How can ...

javascriptjqueryjsonjsonlint

Retrieving information from MongoDB queries using Node.js

I am facing an issue while trying to retrieve data from the find() method and use it outside the method. My goal is to incorporate this data into a JSON response. Unfortunately, my current code is not working as expected and the data is not accessible outs ...

javascriptnode.jsmongodbfindresponse

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream

Is there a way to add a stop button as well? Currently, I have play and pause buttons, but the stop function doesn't truly clear the music buffer in the browser; it just stops playback without resetting to the beginning. This is fine for MP3 files but ...

javascripthtmlaudiotags

The request to the route timed out after waiting 5000ms for a response from the server

I am a newcomer to using Cypress and I'm exploring an HTML page for testing purposes. My goal is to test the login authentication and log the body of an XHR. Here's the test code I wrote for this: describe('Login test', function () { ...

javascriptcypress

Retrieve all populated fields on the second tier using Node.js and Mongoose

Do you have any insights to share on Node.js and mongoose? I've defined a mongoose schema and when I use findOne(), it returns a document with multiple elements under the "resource" key. Below is an example of how the document looks like: { "met ...

javascriptnode.jsmongodbmongoose

Is the pypi package causing automatic uninstallation and upgrading of other components?

I have developed a PyPI package which relies on Django, in my setup.py file I specify the dependency like this... install_requires = ["Django"] Additionally, within the egg distribution, there is a requires.txt file that lists... Django Recently, I rel ...

pythondjango

Ways to conceal a div in React when the input or child is not in focus

My custom search and select component includes an input field and a results list enclosed in a wrapper container: <div className='wrapper'> <input /> <div className='results'> <div>Result Item</div> ...

javascriptreactjs

Is there a way to redirect using Express JS when the destination is

Hello there, I'm encountering an issue with redirecting in express js. I have a function that should trigger when a submit button is pressed and then redirect to a different page. However, when using res.redirect('/results.ejs');, I receive ...

javascriptnode.jsexpressejs

Nested Tab Generation on the Fly

My goal is to create dynamically nested tabs based on my data set. While I have successfully achieved the parent tabs, I am encountering an issue with the child tabs. Code $(document).ready(function() { var data1 = [["FINANCE"],["SALE"],["SALE3"]]; var da ...

javascriptjqueryjquery-uitabs