The background image fails to load due to a quotation mark in the URL

I am currently facing some challenges with a project where the process of converting text into URLs is not functioning properly. This issue arises when certain URLs contain a quote mark, for example somethi'n.png.

The problem occurs when using these image paths as background images, which disrupts the CSS properties and triggers an invalid property value warning.

Is there a way to resolve this without having to correct all the image paths individually?

'<div style="background: url('+ad.featured_image+')" ...
css

Answer №1

const findSymbolPosition = path => {
  let position = path.lastIndexOf('.');
  return path.substring(0,position).replace(/_/g, "") + path.substring(position);
}

const cleanedPath = findSymbolPosition("somethi'n.png");
console.log(cleanedPath); // Output: somethin.png

This function will remove special characters in the path variable. For example, "somethi'n.png" will become "somethin.png".

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

Jquery script to update the background of the parent element when Bootstrap Tabs

Currently, I am exploring ways to come up with a more sophisticated solution. However, my proficiency in jquery is somewhat limited at the moment. I believe there must be a more efficient method to achieve the desired function outlined below. In essence, ...

jquerycsstwitter-bootstrap

Custom CSS for the Google Maps Circle Object

Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations. Although I am aware that custom overlays can be used for t ...

javascriptcssgoogle-maps-api-3

Do not apply styling to a particular page in CSS and HTML

Utilize the teachable.com platform and take advantage of their code Snippets feature (refer to attached photo #1) https://i.stack.imgur.com/dW1lB.png I inserted the following code: div { direction: rtl; } To modify the website's direction to be ...

htmlcss

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages

Creating a uniform layout with Flexbox: Equal-height columns with aligned tops

In the application, I have implemented a flexbox layout similar to the code snippet below, containing a group of li elements with three divs in each. .container { width: 500px; } ul { list-style: none; margin: 0; padding: 0; display: flex; } l ...

cssflexbox

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

cssd3.jsbootstrap-5whitespace

What could be causing the next button to not display the content on the following page when clicked?

Hello, I'm new to programming and I'm working on creating a complaint page using Bootstrap, CSS, and JavaScript. I encountered an issue when trying to hide the content of the next page using the following CSS code: .needs-validation fieldset:not( ...

htmlcssbootstrap-4

Steps to incorporate fancybox in a PHP MySQL gallery: Once the gallery is established, ensure that the path points to

After creating a gallery using PHP and a MySQL database, I encountered an issue when attempting to integrate fancybox. The gallery successfully fetches images from the upload folder, but fancybox does not use the default fancybox class. Below is a snippet ...

phpjquerycssmysql

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button. https://i.sstatic.net/iU8wi.png ...

htmlcss

Troubleshooting resizing images in React using Material UI's useStyles

When attempting to resize an image using React, I am encountering a problem where adjusting the height and width of the tag with useStyles does not reduce the size of the image but instead moves it around on the page. Here is the code snippet: import { ma ...

javascriptcssreactjsmaterial-uiresize

CSS: The background color of the body is appearing correctly when viewed locally, but does not display on

I had been using the styles.css file with this body stanza: body { font: 18px Helvetica, sans-serif, Arial; color: #ffffff; background: url("../images/bg.jpg") center top repeat-x; background-size: cover; line-height: 20px ...

htmlcss

Preventing the user from using the mouse wheel until the CSS animation finishes

I am working with multiple functions that are triggered by scrolling the mouse wheel up and down. These functions must be called in a specific order, but the issue arises when users scroll quickly causing the CSS animations from the previous function to ...

jqueryhtmlcss

Struggling to achieve a horizontal scroll using 'overflowX' in MUI, but unfortunately, it's not functioning as expected

Is there a way to create a properly-sized card with a horizontal scrollbar in a paper format? I've tried using 'overflow' but it doesn't seem to be working in this scenario. import React from 'react'; import { makeStyles } fro ...

cssreactjsmaterial-ui

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally. Creating a single line of divs is straightforward, but it&apo ...

javascripthtmlcss

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

While conducting browser testing on the website The website's top navigation menu includes rollover effects for building services, exterior services, and commercial categories. The CSS-triggered navigation works seamlessly in all browsers except for ...

htmlcssinternet-explorer-7navigation

Alignment in HTML / CSS / ReactJS: Leveraging the Text-align attribute

My attempt to align the text to the right within my div element has been unsuccessful. Despite using text-align: right and width: 100%, the issue persists. It seems that the problem lies within the left-side and right-side attributes, but I am unable to pi ...

htmlcssreactjs

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

While there are numerous similar issues out there, the bug I am encountering feels unique. This issue involves a page with a div in position:fixed style, specifically affecting certain less common mobile browsers like Star Safari, DU Browser, and Tint Brow ...

csscross-browsercss-positionmobile-browser

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

javascripthtmlcss