Why doesn't React update my image URL event after adding in a key to trigger a re-render

Question

So here is my code:

<img src={currentQuestion?.GIF_URL} key={`${GIF_URL}-${currentIndex}`} alt='gif' style={{margin: '0 auto'}} />

As you can see I've added in a key to tell React to trigger a re-render and this has worked with my audio files but is not working with my gif url to my appwrite storage bucket.

I've tried adding in a key to trigger a re-render and I was expecting it to update and re-render just my this component:

<audio key={audio_URL} controls autoPlay>
            <source src={audio_URL} type="audio/mp3" />
                    </audio>

Hey thanks for responding. I update it like this: <audio key={audio_URL} controls autoPlay style={{ opacity: '0', position: 'absolute' }}> <source src={audio_URL} type="audio/mp3" /> </audio> — TheHollyRoller
– TheHollyRoller, Commented Apr 15 at 20:10
This is using the destructured context variable that will update and trigger a re-render: const {questionText, audio_URL, Section, Type, GIF_URL } = currentQuestion; — TheHollyRoller
– TheHollyRoller, Commented Apr 15 at 20:11
Is the image src url changing? If not the browser might be caching the url. — L0uis
– L0uis, Commented Apr 15 at 20:13

TheHollyRoller · Accepted Answer · 2025-04-15 20:23:45Z

0

So I found a workaround. I realised that the GIF url context variable was not being updated.

So in the context hook I extracted the array of urls from the backend and I added that in as another context variable.

Then I used a currentIndex variable that is I used in the context to move to the next question to access the elements in my urls array.

That way I just extracted the urls and put them in an array and then passed that through context and looped through the array to extract the relevant gif url

answered Apr 15 at 20:23

TheHollyRoller

3181 gold badge6 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Why doesn't React update my image URL event after adding in a key to trigger a re-render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related