Use a custom HTML tag instead of an img tag to display the image, but for

I run a blog where I wanted to create a subsite showcasing my favorite apps. To maintain code consistency and avoid confusion with the existing HTML code that describes the website, I decided to create a separate "subHTML" specifically for app cards. So far, the best I've been able to do with this code is display the texted source of the image instead of the actual image. I have tried various CSS solutions such as using content: attr(data-src url), experimenting with different parameters inside var(), attempting 

background-image: attr(data-src url)
, adjusting max-width, max-height, width, height properties, utilizing ::before, etc.

Here is the current non-working code:

:root{
     --icon: attr(data-src); 
    }
    app-icon::before{
      display: inline-block;
      content: var(--icon);
    }

<app-box><app-title>app name</app-title><app-icon data-src="https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg"></app-icon></app-box>

Few additional notes:

  • I prefer not to use JavaScript for accessibility reasons
  • I also try to avoid using JavaScript to prevent confusion
  • I have sought help in other places but haven't found a solution yet
  • I am familiar with XML and would like to use it in other projects as well
  • I am using Firefox, but friends with other browsers also encounter the same issue (so it's not a browser-specific bug)
  • I understand that custom tags usually don't have defined attributes except for id and class, so I created custom ones
  • I am aware of the default CSS property of inline-block for the img tag

Screenshot of the current bug :

https://i.sstatic.net/NTbkl.png

This blog can be accessed at : if anyone wants to test this buggy CSS themselves

If anyone knows how to successfully display an image from a custom tag, please share your insights!

htmlcsscustom-tag

Answer №1

The problem with your code is that you are trying to set a variable on the root element, which does not have the attribute "data-src". Only the app-icon has this attribute. A correct implementation would look something like this:

app-icon {
  --icon: attr(data-src);
}

app-icon::before {
  display: inline-block;
  background-image: url(var(--icon));
  width: 100px;
  height: 100px;
  content: '';
}

Unfortunately, this approach doesn't work as expected because URL variables cannot be used in this way.

You cannot use url() with var(--url) since it will be treated as a single invalid URL token. This causes the substitution of the variable to fail, resulting in an invalid background declaration.

(Source: )

An alternative solution is to include the URL directly in inline CSS:

<app-box>
  <app-title>app name</app-title>
  <app-icon style="--icon: url(https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg)"></app-icon>
</app-box>

However, I don't believe this is the most optimal solution. What are your objectives for using this method? It might be better to consider using picture/source/img tags for responsive images (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)

Answer №2

Unfortunately, achieving this solely with CSS is not feasible. One approach could involve utilizing the content: url(var(--icon)) method, however, it may prove ineffective. It appears that you are attempting to extract a value from the data-href attribute when your HTML actually contains data-src.

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

Tips for adjusting a background image to be fixed horizontally with the background-attachment property without affecting the vertical

I am facing a challenge with aligning the background image inside the #main div with that of the body. Both backgrounds are similar and I want them to be properly aligned, but with only horizontal repeating on the #main background. The aim is to prevent th ...

htmlcss

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

javascripthtmljson

Adjust the border hue of the MUI disabled outline input

I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...

javascriptcssreactjsmaterial-uidisabled-input

What could be causing some Fontawesome icons to not display properly?

My index.html is set up correctly with my kit, but I'm having some issues. <script src="https://kit.fontawesome.com/a*******5.js" crossorigin="anonymous"></script> While some icons are showing up just fine, others are ...

htmlcssicons

Having difficulty rendering images in PHP

I'm having trouble displaying images on my web server using php, and I keep encountering a server 500 error. The issue appears to be related to this line of code: echo "<img src='$row["sourchPath"]'>": while ($row = mysqli_fetch_asso ...

phphtmlmysql

Build a custom HTML interface for accessing a CXF REST API utilizing @HeaderParam annotation and List<Attachment> functionality

Recently, I encountered an issue with my cxf rest service which has @HeaderParam and List Attachment as parameters. I am trying to create an HTML client to call the service but keep running into exceptions. Can anyone guide me on how to properly set the he ...

javahtmlweb-servicesrest

Utilize the HTML File Selector to access files from the server side

Is there a way to use the HTML file selector <input type="file"> to browse files that are stored on my server rather than locally? I understand that JS is client-side, and despite researching different approaches, I have not come across any suitable ...

javascriptjqueryhtmlajaxserver

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

I have a function that takes an object retrieved from a database as its argument. My goal is to display the values of this object in a form by associating each value with a specific DOM selector. Here is the code snippet where I achieve this: function pai ...

javascripthtml

center commotion excitement vessel vertically

I am facing a dilemma once again and could really use a helping hand. I have created an exciting animation that I have placed within a Bootstrap 4 tab, but I'm struggling to center it vertically. Is there someone out there who could help me out? Tha ...

csshtmlbootstrap-4

allowing the addition of bootstrap glyphicons to input field

I am having difficulty adding a Bootstrap glyphicon to my form. <form role="form"> <div class="form-group has-feedback"> <label class="control-label">Username</label> <input type="text" class="form-control" placeholder= ...

csstwitter-bootstrap

Looking to develop a swipeable card feature similar to Gmail using React JS (excluding React Native)?

Looking to replicate the swipe card functionality of Gmail in React Js, After creating the UI and implementing swiping using UseGeature, I am facing an issue with smooth animation when hiding or showing buttons using UseEffect. There is a 20px movement be ...

javascriptcssreactjs

Warning: Rejection notice for running a JavaScript script. Request contains script source code

Is there a way to prevent Chrome from throwing the error: Refused to execute a JavaScript script. Source code of script found Within request. This issue arises due to objects in my HTML code that trigger a function on mousedown, as shown below: <div> ...

phpjavascripthtmlgoogle-chromexss

The footer is failing to appear in its correct position on the homepage of the Rails application

My footer looks great throughout my Rails app except for the Home page. Here is the content of my application.html file: <!DOCTYPE html> <html> <head> <title><%= yield(:title) || "Wagon Rails" %></title> <meta n ...

htmlcssruby-on-railstwitter-bootstraplayout

Is there a chart component in bootstrap that allows for customization of time frames?

You can find this image in the search results when looking for rates online I'm interested in creating a similar chart, but I'm not sure what it's called. Can I use bootstrap line charts to create something like this? ...

javascripthtmlbootstrap-4

CSS animation is designed to work with a single element

For my school project, I've been experimenting with creating a functional phone using HTML. To achieve this, I incorporated a JavaScript class as shown below: document.querySelector(".app-content").classList.add("app-on"); The class .app-on alters th ...

javascripthtmlcsscss-animations

Tips for aligning input elements in the center using HTML and CSS

https://i.sstatic.net/3B7F9.jpg Can someone help me center the input vertically within the image? I'm not sure how to achieve this. .headmenu { background-color: rgb(47, 47, 47); width: auto; height: 30px; } .headmenu-right { float: right ...

htmlcss

Modify the text of a button using JavaScript without referencing a specific div class

THE ISSUE I'm facing a challenge in changing the text of a button on my website. The <div> I need to target doesn't have a specific class, making it difficult for me to make this edit. While I have some basic understanding of JavaScript, ...

javascripthtmlclassdombutton

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

javascriptjqueryhtmlcss

Troubleshooting issues with hero banner image display in CSS and HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mountains&l ...

htmlcss

How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

gradeexpanded:false, gradeOnClick: function (event) { this.gradeexpanded = !this.gradeexpanded; }, .dropdown-check-list { margin-left: 35px; displa ...

htmlcssvue.js