Why isn't the background-image : url() function cooperating in TypeScript?

I am facing an issue in my Rails project where I am trying to toggle the visibility of an image when a user clicks on it. Below is the code snippet I have implemented:

$(document).ready(function() {
  if ($("#myvideo").prop('muted', true)){
    $("#mute").css("background-image","asset_url(mute.svg)");
  }

$("#mute").click( function (){
  if( $("#myvideo").prop('muted') ) {
    $("#myvideo").prop('muted', false);
    $("#mute").css("background-image","url(app/assets/icons/speaker.svg)");
  } else {
    $("#myvideo").prop('muted', true);
    $("#mute").css("background-image","url('mute.svg')");
  }
});
});

Despite trying multiple approaches, none of them seem to be working. However, using a direct URL like 

$("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)");
works fine.

Edit: I also attempted the following:

$("#mute").css("background-image","url(<%= asset_path 'mute.svg' %>)");

Unfortunately, this did not yield the desired result. Can anyone shed light on why this might be happening and suggest a fix?

javascriptcssruby-on-railsrubytypescript

Answer №1

Place the file mute.svg into the app/assets/images directory, and you can use the following code to access it:

$("#mute").css("background-image","url('/assets/mute.svg')"

Answer №3

If you are experiencing success with this method, it indicates that there may be an issue with your image path.

$("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)");

There are two possible solutions to consider: Retrieve your application's path using asset_path and then use the code below:

$("#mute").css("background-image","url("+YOUR_ASSET_PATH+"assets/icons/speaker.svg)");

OR attempt the following alternative approach:

$("#mute").css("background-image","url(/assets/icons/speaker.svg)");

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

Unable to hear sound on Mozilla Firefox

I am facing an issue with playing an audio file using the audio tag inside the body element. The audio plays perfectly in Chrome once the body has finished loading, but it fails to play in Mozilla Firefox. I even attempted to download the audio file and pl ...

javascripthtmlcss

Generating various API calls and delivering them to a template (Express + Node.js + Facebook open graph)

I am currently developing a unique Express Node.js application that utilizes the extraordinary capabilities of this remarkable Facebook SDK. Allow me to present my existing route for the root: app.get('/', Facebook.loginRequired(), function (req ...

javascriptnode.jsexpressrequest

What is the best way to showcase information in Angular?

I am facing an issue where my cards are not displaying data from the database, they appear empty. Can anyone provide a solution to help me fix this problem? Below is the output I am getting, with the empty cards that I want to populate with data. https:// ...

htmlangulartypescript

Dynamic starting point iteration in javascript

I'm currently working on a logic that involves looping and logging custom starting point indexes based on specific conditions. For instance, if the current index is not 0, the count will increment. Here is a sample array data: const data = [ { ...

javascripttypescriptecmascript-6

What could be causing my navigation bar to not fully extend across the width of the browser with the codes I am currently using

After implementing the CSS code provided below, my goal was to create a navigation bar that spans the entire width of the browser and features a striking red background. Additionally, I intended to position the logo on the furthest left side with text dire ...

csscenter

Accessing services from the main page's popover callback in Ionic 2 is essential for enhancing user interaction and

After spending some time working with angularJs, I recently made the switch to angular 2. I am facing an issue with calling a popover from a page and fetching data from an API when an item is selected from the popover. The problem arises when I try to acce ...

javascriptangulartypescriptionic2this

Retrieving particular table data cells using class identifiers

I've been spending a lot of time on this, trying out every possible solution I can find online. My goal is to retrieve all the td elements in my table, but the challenge lies in filtering some of them out. Here's the HTML code for my Table eleme ...

javascripthtml

Increase the value of a property within an array of objects based on certain conditions

My task involves incrementing the rank value by one until the name property changes. I am utilizing the page and rank properties to track when this change occurs. In addition, I want to increment it once whenever the type is not equal to none, and then re ...

javascriptarraysobject

Ways to verify the functionality of this specific custom hook (useRef)

Can anyone help me figure out how to pass the useRef as a parameter for testing this custom hook that uses ElementRef from React? import { MutableRefObject, useEffect, useState } from "react" export default function useNearScreen(elementRef: ...

reactjstypescriptunit-testingreact-hooksreact-testing-library

Why isn't my jQuery code functioning properly on Weebly?

Hello, I'm a beginner in coding and have very limited skills in this area. However, I am able to install scripts on my Weebly site and have been doing so for some time now. Even though I can't code, I've managed to learn a few things along t ...

javascriptjqueryhtmlcssweebly

Which TypeScript AsyncGenerator type returns a Promise?

I am currently in the process of assigning a return type to the function displayed below: async function *sleepyNumbers() { // trying to determine TypeScript type let n = 0; while (true) { yield new Promise(resolve => resolve(n++)); ...

typescriptgeneratoriterable

unable to pull out variables from the provided example

I have a string example that requires extraction of values. Here is the sample provided: {#-- important parameters #} {#@@ { 'var1': { 'title':'blah blah', 'type':'text', 'value':'def ...

javascriptreactjsregexregex-groupregex-greedy

What is the reason that selection disappears when right-clicking on highlighted text to bring up the context menu?

Currently, I am utilizing Material UI's context menu implementation in my project. On Chrome browser, everything is functioning flawlessly, as depicted below. Chrome: https://i.stack.imgur.com/i7eA1.gif However, I have encountered a peculiar issue ...

javascriptreactjsfirefoxmaterial-ui

Issue with import alias not functioning within route grouping in Nextjs

Exploring the use of route groups and nested layout files led to encountering a "module-not-found" error with every import that used "@". Here is my jsconfig.json setup: { "compilerOptions": { "baseUrl": "./src", &q ...

javascriptnext.jsroutes

Is there a way to exclude automatically generated Relay query files from Jest tests in a create-react-app project?

After creating a React app using create-react-app and integrating Relay, I encountered an issue while trying to test my components with Jest. The problem arises from the fact that the Relay compiler generates files that Jest mistakenly identifies as test f ...

javascriptreactjsjestjscreate-react-apprelay

Guide on obtaining the camera position using mouse movement event and converting it into screen coordinates in three.js

Is it possible to determine the camera positions using the mouse move event and transform them into screen coordinates? I am attempting to navigate on a sphere object by moving my mouse and want to obtain the new camera position based on the mouse movement ...

javascriptgoogle-maps-api-3three.jsmouseevent

Adjusting the view of the three.js camera

After exploring the Three.js globe example on github, I set out to create my own globe using some specific data. However, I am encountering difficulty in making the camera focus on a given coordinate. I attempted to use a function to convert coordinates i ...

javascriptcamerathree.jsrotation

Ways to trigger an event or invoke a function after initializing Stripe JS

My checkout page is optimized with the new Stripe Payment Element for fast loading using SSR. However, I am facing an issue where the element sometimes causes the page to reload 2 or more times before functioning properly. Occasionally, it also displays ...

javascriptjqueryvue.js

What are the steps for defining a package once and utilizing it across multiple pages?

Hello, I'm new to Next.js and I have a question regarding the code organization. In my project, I have two pages: PostList (index.js) and PostSingle ([postId].js). I want to implement a feature that allows users to switch between dark and light theme ...

javascriptreactjsnext.jsarchitecture

Dealing with Error TS2769 in Visual Studio Code when passing props to a custom component in Vue 2 with Typescript

I've encountered an issue with a Vue JS component that involves passing a custom prop. I am utilizing the Vue Options API without utilizing the class component syntax. Whenever I pass ANY prop to my custom component the-header, I receive an error sta ...

javascripttypescriptvue.jsvuejs2