Is it possible to assign binary content to the src attribute of an img, audio, or video tag?

Picture this scenario: I send an ajax request to my PHP server with the name of an image file, and the server is restricted from sending a direct link to the file. Instead, it must send the file contents using PHP's readfile(); function. Now, when this data is returned, how can JavaScript set the src attribute of an img element?

myXMLHttpRequest.onload=function(){
  imgElement.src= /*need help working with myXMLHttpResponse.reponseText*/;
}

The goal here is to populate the src attribute using binary content of an image file stored in a string.

Answer №1

Absolutely, this is very achievable and commonly practiced.

Just employ the URL of your PHP code. No need for XHR.

<img src="your-image-renderer.php" />

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

Troubleshooting the issue: "Error - 'Missing "data" payload in the request' when using Vue.js with Strapi"

When attempting to create a new entry in strapi by sending a post request in vue.js, I encountered the following error: message: Missing "data" payload in the request P.S: I also need to be able to upload files. I have read that using formData is ...

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

JavaScript plugin specifically designed to enable playback of media content, such as videos from

I am working on a spring-based project and I require the ability to play audio/video in various formats similar to YouTube. I am currently searching for a free JS plugin that would be the best fit for my needs. Any suggestions or recommendations would be ...

Experiencing difficulties loading Expo Vector Icons in Nextjs

I've spent countless hours trying various methods to accomplish this task, but unfortunately, I have had no luck so far. My goal is to utilize the Solito Nativebase Universal Typescript repository for this purpose: https://github.com/GeekyAnts/nativ ...

Seeking assistance with downloading a collection of images as a zipped file using AngularJS

My code was previously working with jszip 2x but now I'm getting an error stating "This method has been removed in JSZip 3.0, please check the upgrade guide.". Even after following the upgrade guide, my code is still not functioning properly. I need a ...

How to send emails in the background using a React Native app

I'm looking to incorporate email functionality into a React Native app so that it can send messages automatically when certain actions occur in the background. ...

Express server experiences empty body when using the Fetch POST method

Executing a POST request from my browser client looks like this: const post = async (url, body) => { try { const response = await fetch(url, { method: `POST`, headers: { 'Conte ...

Utilize Ramda.js to transform commands into a functional programming approach

I have written a code to convert an array of numbers into a new datalist using imperative style. However, I am looking to convert it to functional style using a JavaScript library like ramdajs. Code Background: Let's say we have 5 coins in total with ...

Is it possible to assign a property name using a string during the creation of an object?

Can an object property be named directly within the object declaration instead of afterwards? For example, this syntax works: var name = "foo"; var obj = {}; obj[name] = "bar"; // obj.foo === "bar" But is there a way to define it inside the object it ...

Encountering difficulties in fetching data with formData in nextJS

Exploring the realm of NextJS and delving into server side actions. I'm facing a challenge with this specific request. import { revalidatePath } from "next/cache"; export async function submitIPCR(prevState: any, formData: FormData) { / ...

Illumination causes surfaces to transform

In my simple scene, I have a ground and an interesting light source. However, when the light hits certain meshes, it creates some strange effects. The shadows are being cast correctly, but the other meshes affected by the light are showing unusual results. ...

Issue: Unhandled rejection TypeError: Unable to access properties of an undefined variable (retrieving 'data')

Currently, I am developing applications using a combination of spring boot for the backend and react for the frontend. My goal is to create a form on the client side that can be submitted to save data in the database. After filling out the form and attemp ...

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

When generating elements dynamically with JavaScript using document.createElement("p"), I am looking to create a paragraph element <p></p> that includes an anchor tag in the middle, creating a clickable link within the text. I aim to use JavaS ...

What is the best way to initiate a TouchEvent in a qunit test being run by grunt using only vanilla JavaScript?

I have implemented callbacks for different touch events that require testing. For example, the 'touchstart' event utilizes touch coordinates to configure a class member: NavigationUI.prototype.touchStart = function(evt) { this.interacting = ...

Conceal or reveal form elements based on input selection

In my current HTML form generated by PHP, I have multiple instances of the following structure: function show(elem, show){ var elements = elem.parentNode.parentNode.parentNode.getElementsByClassName("hidden"); var i; for(i=0; i<eleme ...

Issue with setting state in useEffect causing an infinite loop due to either linter warning or user error

In its current state, my component appears as follows: const { listOfStuff = [{name:"john"},{name:"smith"}] } = props const [peopleNames, setPeopleNames] = useState([]) useEffect(() => { listOfStuff.forEach(userName => { setPeopleNames(people ...

Displaying Spinner and Component Simultaneously in React when State Changes with useEffect

Incorporating conditional rendering to display the spinner during the initial API call is crucial. Additionally, when the date changes in the dependency array of the useEffect, it triggers another API call. Question: If the data retrieval process is inco ...

Dealing with errors in multer and express-validator aspects

Is there a way to validate a form that includes an image using multer and other fields with express-validator? I keep encountering an undefined error (req.validationError) in the post route. Any suggestions on how to resolve this issue? server.js const e ...

When accessing req.param on the server side in a Node.js application, it returns undefined

I am currently utilizing nodejs and angularjs for my project. In the client-side javascript file, I made a GET request to the nodejs server with necessary data in parameters. itinerary.js $http({ method : "GET", url : '/createItinerary&apo ...

JavaScript code that opens a URL in a new tab with proper formatting

I'm having trouble figuring out how to make my JavaScript open a URL in a new tab. Here is the script: function viewSource(){ var webcache = "http://webcache.googleusercontent.com/search?q=cache:"; var request = "&prmd=ivn&strip=0& ...