Header image not loading in localhost:3000 rails app

Question

I am working on a website using rails. I am trying to create a header with a background image that is separate from the navigation bar. However , when I go to the page in localhost:3000, the image is not loading: K&D Welcome page

I have added my image to app/assets/images/ and tried the following code in my view:

    <header>
        <div class="header-background">
            <%= image_tag("/assets/kiss.jpg")%>
            <h1> 
                Katie & Dan 
            </h1>
        </div>
    </header>

And this in my welcome.scss file:

.header-background {
    background-image: url("/assets/kiss.jpg")
    width 500px;
    height: 300px;
    order: 2;
}

I have tried several suggestions that I have found online, such as changing settings in the development.rb file, using <image_src= /> instead of image_tag,moving my image to the public/assets/images directory. I'm stuck as to how I can get this image to show up in my local environment .

Any tips would be greatly appreciated!

Thank you,

Answer 1

I think you should put your images in the public/ folder, storing them in another folder named images/ (for example : public/images/kiss.jpg)

Then, you can find your image like this :

<img src="/images/kiss.jpg">

Answer 2

Try <%= image_tag("kiss.jpg")%> instead of <%= image_tag("/assets/kiss.jpg")%>

Please refer: https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag