CODEWITHSUNDEEP
csssasscompass-sass
Jerielle
Jerielle

Reputation: 7520

Unable to get correct image path using Sass

I am studying Sass. And I am following this tutorial on youtube. Everything looks find but when it comes to calling the image I can't access my image inside images folder.

Here's my scss part:

img[alt="Programming Frameworks"] {
    content: image-url('small2.png');
}

And my config:

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

And when I inspect the css from developer console I got this:

img[alt="Programming Frameworks"] {
    content: url('/images/small2.png?1479092109');
}

And when I manually modify the css output in dev console to this:

 img[alt="Programming Frameworks"] {
        content: url('../images/small2.png?1479092109');
 }

It can access the image but in my HTML. It doesn't show.

Can you help me? I new in sass development.

Here's my directory structure:

enter image description here

I also try this following code:

img[alt="Programming Frameworks"] {
    content: image-url('small3.png');
    width: image-width('../images/small3.png');
    height: image-height('../images/small3.png');
}

And I check my developer console and I got this:

img[alt="Programming Frameworks"] {
    content: url('/images/small3.png?1479092299');
    width: 466px;
    height: 308px;
}

The exact width and height is correct. But cant access the image. :(

Upvotes: 2

Views: 629

Answers (2)

Daisi
Daisi

Reputation: 2418

The problem is with your config.rb file

You need to add this line to it

relative_assets = true

This will allow compass helpers enable relative paths to images and other assets

Upvotes: 1

amit bende
amit bende

Reputation: 264

pls try give him height and width because ur path right so try to give height and width

Upvotes: 0

Related Questions