Set the equivalent of a src attribute of an img tag

Question

I am doing like this:

<img class="myimg" />
.myimg{
    content:url('/images/user_logo.png') center no-repeat;
}

But the image is not getting displayed. I want to achieve it without using background image

Make sure you're targeting the correct class, so `.myimg` instead of `.mgimg`. Also, is there a reason why you want to add the image that way? Why not `` (update to have the correct path) and then style it with CSS to center how you want it? — jayly, Mar 09 '18 at 07:16

Temani Afif · Answer 1 · 2018-03-09T08:32:27.343

You are almost good, keep only the url (but this is not supported by all the browser)

.myimg {
  content: url('https://lorempixel.com/400/200/');
}

<img class="myimg">

This will also work if there is already an image defined:

.myimg {
  content: url('https://lorempixel.com/400/200/');
}

<img class="myimg" src="https://lorempixel.com/g/400/200/">

For browser compatibility better rely on another method. Let's assume that your image is within a container then you can try something like this:

.myimg img {
  display: none;
}

.myimg:before {
  content: url('https://lorempixel.com/400/200/');
}

<span class="myimg">
<img  src="https://lorempixel.com/g/400/200/">
</span>

score 0 · Answer 2 · answered Mar 09 '18 at 07:05

0

Use background-image for that:

.myimg{
 background-image: url('/images/user_logo.png');
}

answered Mar 09 '18 at 07:05

aMJay

score -1 · Answer 3 · answered Mar 09 '18 at 07:32

-1

Try using :before and :after method to achieve this. follow by the stack example here

.myimg:before {
    content:url('../images/user_logo.png');
}

answered Mar 09 '18 at 07:32

Saravana

3 Answers3