Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up.

The images are being imported correctly, so I'm unsure why the image is not appearing as expected.

import NoBillsMobilePNG from "../../public/assets/quotes/no-bills-mobile.png"
import NoBillsLaptopPNG from "../../public/assets/quotes/no-bills-laptop.png"

export const NoBillsSummary = () => {
  return <div>
    <TestImg
      NoBillsMobilePNG={NoBillsMobilePNG.src}
      NoBillsLaptopPNG={NoBillsLaptopPNG.src}
    ></TestImg>         
  </div>;
};

const TestImg = styled.img<{
  NoBillsMobilePNG: string;
  NoBillsLaptopPNG: string;
}>
// the src of the image is passed in as props because a media query will be added later to switch between images

src: url(${(NoBillsLaptopPNG) => NoBillsLaptopPNG.src});

width : 126.07px;
height : 107.59px;
margin-top: 2px;
`;
javascriptcssreactjstypescriptstyled-components

Answer №1

When utilizing the TestImg component, you pass src as props to NoBillsLaptopPNG.

A more appropriate name for props would be NoBillsLaptopPngSrc.

If you are styling TestImg, the input parameter for NoBillsLaptopPNG is already src. Therefore, referencing its src field again is redundant.

Consider this alternative approach:

 src: url(${(NoBillsLaptopPNG) => NoBillsLaptopPNG});

Answer №2

When using styled-components, if you include a function in your style, it will be executed with the entire set of props from the component.

As a result, you need to specify a specific member or destructure it, similar to how you would with a regular React Function Component.

It's important to note that changing the src attribute of an <img> tag through CSS alone is typically not possible. However, altering its content is still achievable.

As mentioned by @forlift's response, you are already passing the .src value as a prop, so there is no requirement to access it again.

const TestImg = styled.img<{
  NoBillsMobilePNG: string;
  NoBillsLaptopPNG: string;
}>`
  // Destructuring the props here
  content: url(${({ NoBillsLaptopPNG }) => NoBillsLaptopPNG});

  width : "226.07px";
  height : "207.59px";
  margin-top: "2px";
`;

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

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

Replacing JS/CSS include sections, the distinction between Debug and Release versions

Can you share how you manage conditional markup in your masterpages for release and debug builds? I am currently using the .Net version of YUI compress to combine multiple css and js files into a single site.css and site.js. One idea I had was to use a u ...

asp.netjavascriptmsbuildcompression

Struggling with the elimination of bullet points in CSS navigation bars

I'm having trouble removing the bullet points from my navigation bar. I've tried using list-style-type: none and even adding !important, but it doesn't seem to work. Strangely enough, everything looks fine in Chrome, but I get an error when ...

htmlcsslistnavigation

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

I'm encountering issues with my current web app project in displaying a simple jpg image based on the selected radio button using jQuery AJAX along with a PHP script to interact with MySQL. Below is my ajax.js file: $('#selection').change( ...

javascriptphpjquerymysqlajax

Observe the present time in a specific nation

Is there an authorized method to obtain and showcase the current accurate GMT time instead of relying on the easily manipulable local time on a computer? I am looking for a reliable way to acquire the current time in hours/minutes, so I can make calculati ...

javascriptjsonjquery

When attempting to start the npm, an error occurs which prevents the local host from running properly

Currently, I am delving into the world of React. However, when attempting to initiate the project with npm start, an error popped up displaying: PS C:\Users\AARYAE\OneDrive\Desktop\tr> npm start npm ERR! Missing script: "s ...

reactjsnpmterminalhostingweb-development-server

Using an External JavaScript Library in TypeScript and Angular 4: A Comprehensive Guide

My current project involves implementing Google Login and Jquery in Typescript. I have ensured that the necessary files are included in the project: jquery.min and the import of Google using <script defer src="https://apis.google.com/js/platform.js"> ...

javascriptangulartypescript

Vue.js has a feature where it automatically closes the form tag within a for loop

In my Vue.js application, I have created a table where each row is a form with a submit button. This is the code snippet I am using: <div id="admin-user"> <table class="table"> <tr v-for="(user, index) in users"> < ...

javascriptvue.js

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

javascripthtmlcssreactjs

What is the best way to compare and identify the variances between two JSON documents in Marklogic using JavaScript?

Is there a way to analyze and compare two JSON documents in Marklogic using JavaScript to identify any differences between them? ...

javascriptjsonxmlmarklogic

Troubleshooting a query problem within a forum built with ReactJS, MySQL, Node.js, and Express

As a junior developer, I am currently working on creating a basic forum using ReactJS, Node.js, Express, and MySQL. In the forum, it is essential for each Topic to have multiple Posts associated with it. I am encountering an issue where the posts are not ...

mysqlnode.jsreactjsexpress

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

This question is a continuation of the previous discussion on Typescript property does not exist on union type. One solution suggested was to utilize the in operator to evaluate objects within the union. Here's an example: type Obj1 = { message: stri ...

javascripttypescripttypesunion-types

Is it possible to compare two charts in Chart.js in a way that avoids the issue of small values appearing as large as big values?

I am currently working on a production tracking page that features multiple charts. I want to avoid inconsistencies in tracking at first glance. Is there a way to achieve this using chart.js? If not, what would be the best approach to address this issue? ...

javascriptphpchartschart.js

Mastering the art of utilizing middleware in every HTTP request using Node.js Express

I am currently developing a middleware for my nodejs application and I need to include a header in the request within the middleware before sending it to my index.js endpoint. middleware1.js exports.mw1 = function(req, res, next) { next(); }; middlewa ...

javascriptnode.jsexpress

How can I display a calendar with a complete month view using ng-repeat?

I was trying to replicate a table similar to the one shown in this image: (disregard the styling). I am struggling with how to properly format the data to create a similar table in HTML. $scope.toddlers = [ { "name": "a", "day": 1, "total": 3 }, { ...

javascriptangularjsaggregate

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

javascripthtmlbootstrap-5

Tips for persuading React to accept server-generated markup

Initially, the server sends rendered markup with all the necessary data loaded. The client perceives this as static HTML until React takes control on the client-side. However, the client-side code discards this initial markup. To avoid unnecessary AJAX re ...

reactjsisomorphic-javascript

The masonry reorganization is behaving strangely

I've recently started using masonry for the first time and you can check it out here: Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in. For example, instead of placing a medium-sized ...

javascriptjquerycssjquery-masonry

Swap File Field for Picture Graphic - HTML/CSS

I am looking to enhance the appearance of my form by replacing the generic File Field with a more aesthetically pleasing Image Icon. If you click on this Camera Icon, it will open up a Browse window: For a demonstration, check out this JsFiddle link: htt ...

htmlcss