The script has been modified to add "=s1400" to the image source path, causing the image to fail to load

I have a good understanding of HTML and CSS, but I'm struggling with JavaScript. I noticed that there is a script adding "=s1400" to the image path which is causing the image not to load. You can see the URL is (source files can be viewed using Chrome DevTools).

Original HTML:

<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element  magic-circle-holder  load-high-res shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" />

Modified HTML:

<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element  magic-circle-holder  shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png=s1400" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

Answer №1

I discovered the solution.

After some research, I realized that I needed to include "data-width-before-shrink="700" in the image tag like so:

<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element  magic-circle-holder  shrinkable-img" data-menu-name="HEADER_IMAGE" src="./imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

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

Retrieve the content of an element within a freshly launched window

I am looking to utilize JavaScript to open an html file and input some data into specific elements. My attempt so far has been: var info_window = window.open('info_print.html') info_window.document.getElementById('new_info').innerHTML ...

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I am having trouble applying styling to my SimpleCalendar in Rails, using the gem. When I render it, this is what I see: https://i.sstatic.net/kJi7m.png Here is the CSS provided by https://github.com/excid3/simple_calendar: .simple-calendar { table { ...

Tips for altering the surface of a 3D model's wall in formats such as gITF, glb, and fbx by utilizing a drop-down menu in Three.js

In my Threejs application, I am rendering several 3D models such as gItf, fbx, glb, etc. I am looking for assistance in modifying the texture of a specific mesh when a user clicks on it, and then applying the selected texture from a dropdown menu. Any he ...

Achieving Perfect Table Alignment with Bootstrap Framework

I have updated my static website to include a payment gateway with a custom Paypal button. However, I am facing an issue where the table containing the button is not aligning center on the support page like the rest of the content. Here's a snippet of ...

RecursiveDirectoryIterator fails to show images on the screen

I am unsure of the appropriate title for this issue. The problem I am facing is outlined below. I am currently using the following code: $dataDir = dirname(__FILE__).'/thumbnails/'; $rdi = new RecursiveDirectoryIterator( $dataDir ); $it = ne ...

Ways to invoke a class method by clicking on it

My initialization function is defined as follows: init: function() { $("#editRow").click(function() { <code> } $(".removeRow").click(function() { <code> } } I am trying to find a way to call the class method removeRow directly in the onc ...

Add hover effects to components inside MuiButton

I'm currently working with styled components and Material UI, but I'm struggling to add hover styles to the children of MuiButton. Despite following online resources and documentation, I can't seem to make it work. Here's how my jsx is ...

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

import a dynamically created STL file

After creating an stl file from an uploaded file using JavaScript, I am facing an issue when trying to display it using three.js. Here is how I attempted to load the stl file: loader.load(my_generated_stl_string, function (geometry) { ... } Unfortunatel ...

What is the process for monkeypatching the `querySelector` implementations for individual elements and documents, and then reverting them back to their original states?

Creating a local testing environment requires the temporary override of querySelector. Despite knowing that monkeypatching is generally frowned upon, in this specific instance, the code will only be utilized locally by developers. The following snippet has ...

Discovering the index of an item in Angular

My delete function emits socket.io to update the other party's items list and remove the specific item. The issue arises when I receive the socket data as I struggle to find the matching item to update it. Logic User 1 deletes a message User 2 receiv ...

Using PHP and JavaScript to determine device screen width and eliminate the $_GET parameters from the URL

I have implemented the following JavaScript code to detect screen width and utilize it as a constant throughout my template files using conditional statements to control the visibility of different sections on my site. Just to clarify, I am working within ...

Adding constantly changing information into unchanging HTML

My goal is to dynamically insert content from a Database into a static HTML file. I have successfully achieved this on the client side using JavaScript. Specifically, I need to retrieve values from the Database and place them in designated fields within t ...

extracting values from an HTML document to populate a Java email template

I'm currently working on a contact form that lets users input their information and sends an email to the specified email address. I've been struggling with extracting the parameters from the HTML file and linking them to the email components. Fo ...

Attempting to duplicate Codepen's code onto my local machine

Trying to figure out how to make this work locally after finding it on codepen https://codepen.io/oxla/pen/awmMYY Seems like everything works except for the functionality part. I've included the JS File and the latest Jquery in my code. <head&g ...

Numerous pages utilize a common master page

Currently, I am developing an asp.net web api project in which the Default.html file accesses specific web api endpoints. I now have a requirement to create another page with a different URL, for example, /About, to host additional content. My goal is fo ...

Error: bundling unsuccessful: Issue occurred while attempting to locate module `react-native-vector-icons/Feather`

Implementing a Flatlist from the React Native library in my React Native project. Managed to install all necessary libraries. package.json "dependencies": { "feather-icons-react": "^0.3.0", "react": "16.6.3", "react-native": "0.57.8", " ...

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

Retrieve data from AJAX once the cycle is complete

Currently, I am attempting to calculate the sum of results from an external API by making a single request for each keyword I possess. The code is functioning properly; however, the function returns the value before all the ajax requests are completed. Eve ...

Incorporating Chartist.JS with Jade-syntax pages

Hello everyone, I need some assistance with integrating Chartist.JS into a node Template to display a basic bar graph. The script doesn't seem to be working properly and I'm unsure of what's causing the issue. Can anyone please take a look a ...