Table of Contents
Sometimes, you want to change the src
attribute of an img
without using HTML.
For example, going from this:
HTML<img />
To this:
HTML<img src="/path/here/to/image.png" />
A solution
You can simulate having a src
attribute by using the content
attribute in CSS, and passing in the image path url()
.
For example, if you want to simulate changing the src
attribute of an img
to /path/here/to/image.png
, you can do this:
CSSimg {
content: url("/path/here/to/image.png");
}
This can work in some cases, but it's not recommended, especially because there is a better solution.
A better solution
A better way to add a src
attribute to an img
is to use CSS targeting to add a background-image
. The caveat here is that you need to know and provide the image's dimensions.
Here's how to target the img
and add a background-image
, with an image of dimensions 20rem
by 10rem
:
CSSimg[src*="/path/here/to/image.png"] {
background-image: url("/path/here/to/image.png");
width: 20rem;
height: 10rem;
padding: 10rem 0 0 0;
}
Once you do that, you should see the image in the browser, all without changing the src
attribute.
Conclusion
If you don't want to change the src
attribute of an img
to a different image using HTML, you have two solutions to get the image to display in the browser using CSS.
Hopefully, this post has given you a solution that works for your needs. Happy coding!
- Getting Started with Svelte
- Getting Started with Express
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to deploy a Deno app using Docker
- Getting Started with Deno
- How to deploy a Node app using Docker
- How to Scrape the Web using Node.js and Puppeteer
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase