I am trying to include an image in my web application but it is not showing up properly on my browser(localhost:3000). Have I set it up wrongly?
This is my view code:
<div class="row">
<div class="col-sm-4">
<img src="assets/img/Lab Potion.png" alt="#" class="img-responsive">
<h2>random text</h2>
<p>random text</p>
</div>
</div>
I downloaded an image and saved it under:
-Desktop
-rails_projects
-project_name
-app
-assets
-images
When I check in the images folder there is a file named Lab Potion.png and a bunch of random numbers inside(fingerprint?)
Why is the image not showing up?
<%= image_tag('Lab_Potion.png', :style => "z-index:19; position: relative; float: right;") %> will work. get rid of the space in the file name too, if not just for my sanity.
The random numbers are like a security feature and on each precompile the numbers end up changing. It's more complicated than that, but that is the gist.
And lastly, i doubt you have a img folder as well.
Related
SOLVED
I Simply did not have the closing a tag at the end. Sheesh....
I need help. I'm still a student so still learning. Any help would be appreciated. I'm lost.
I'm using bootstrap5, adding a carousel ("With captions" https://getbootstrap.com/docs/5.1/components/carousel/ for the full code.) to a page and a link in that slide on the h5.
After adding the link, the text went from white to blue and gives me this
"Cannot GET /WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
I've checked this address NUMEROUS times. Even said it out loud to myself. The link IS in the same folder as the rest of the project.
So why won't it work?
I tried to google and found "data-bs-target" does that have anything to do with it? Like I said, still new so still learning.
****Someone pointed out I missed the quotes in the link. Did not fix it.
I added that quote. It was discolored so I don't know where that came from but I think it's because you were right about the quotation style.
I commented that whole line out and started over. I just wanted to see the difference.
So now, the blue is gone in the lettering but now it won't even open another page to show an error. It does nothing.
First slide label
Key West Photo Gallery -->
This is my code snippet ---- KeyWestPhotoGallery.html is the link I'm trying to get to.
<!-- Carousel of Projects -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/palmLighthouse1.jpg" class="d-block w-100" alt="Key West Lighthouse">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-2"><a href=“KeyWestPhotoGallery.html>Key West Photo Gallery</a></h5>
<!-- <p>Some representative placeholder content for the first slide.</p> -->
</div>
You have:
<a href=“KeyWestPhotoGallery.html>
That is not a quote " as used in HTML, that is a Unicode Left Double Quotation Mark a.k.a. opening typographer's quote (a display character with no special meaning). So it thinks that is part of the URL that is why it is urlencoded into that address as %E2%80%9C
let path = "/WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
console.log(decodeURI(path))
Solutions include the following:
Remove it: <a href=KeyWestPhotoGallery.html> (Unquoted attribute-value syntax)
Or, replace it adding the missing closing quote: <a href="KeyWestPhotoGallery.html"> (Double-quoted attribute-value syntax)
Or, use single quotes: <a href='KeyWestPhotoGallery.html'> (Single-quoted attribute-value syntax)
I have an attachment element:
<span style="position: relative; z-index: 1;">
<button class="attachment__browse" type="button" data-l10n-id="record_save_choose_file" id="c97" tabindex="10">Attach File</button>
</span>
And i write script for file attach as:
Wait Until Page Contains Element id=c97
Choose File id=c97 C:\\Users\\NTQ\\My Pictures\\images.png
It doesn't work and show error:
File 'C:\Users\NTQ\My Pictures\images.png' does not exist on the local file system.
I am sure that the locator and file_path are correct. Please help me fix this issue!
C:\\Users\\NTQ\\My Pictures\\images.png this is the path you are using. Space in between "My Pictures" is the reason for it. Try to keep the path of the image which should not contain space in between any of the words.
I'm new to Ruby on Rails, and have been battling with this issue for a while now.
I have pulled a website from git, and made sure all the dependencies are installed, however, when I run the site, I get the error:
ActionView::Template::Error ("\xA9" on UTF-8)
because of the line linking images using the code image_path("bground2.jpg").
When I remove the image_path("bground2.jpg"), the error is resolved.
I however need image_path("bground2.jpg") and can't do without it.
I have tried the solutions here, but it seems not to work
This is a section of the index.html.erb file, but the error is recurring over all places containing the image_path and image_url:
<%= provide(:title, 'Home') %>
<section id="slider" class="">
<div class="img-responsive" style="background-image: url(<%= image_path("bground2.jpg") %>); background-position: 50% 0;height: 500px;">
<div class="container clearfix">
<!-- <div class="slider-caption slider-caption-center">
<!-- <div class="banner heading-block title-center nobottomborder">
<h1><%= "#{t('.reach_home')}" %></h1>
</div> -->
So, I solved this by reinstalling the Ruby application.
Don't know what had caused it, but I just reinstalled the application and everything works fine.
Thanks all for the help.
I had this very same issue. I identified it to a file I had in my application, actually it was taking place in minified javascript file I had in my Rails app. I open the file in text editor, added a new line and, set the encoding as UTF-8 and saved it, and the problem disappeared.
I'm currently having a slight problem referencing images in a Rails app which is then deployed to Heroku.
I have an image in the following path relative to the app:
app/assets/images/some-image.png
And I have referenced it in the HTML correctly (as far as I am aware):
<div id="main-nav" class="collapse navbar-collapse">
<img src="/assets/some-image.png" height="67"/><!-- **IMAGE SOURCE LINK** -->
<ul class="nav navbar-nav" id="mainNav">
<li class="active">Home</li>
<li>APR</li>
<li>Initiatives</li>
</ul>
</div>
Yet, this is what is displayed:
Does anyone have any ideas why this is happening?
You should use image_tag:
<%= image_tag "some-image.png", height: "67" %>
When you deploy to heroku, your assets will get compiled with a unique digest so you can't hard-code the reference to /assets/some-image.png. Check out "Rails Asset Pipeline on Heroku Cedar".
You will need to use some helper functions so the image path is correctly resolved, like image_path('my_image.png'). See "ActionView::Helpers::AssetTagHelper" or "Asset Tag Helpers".
I'm trying to get a photo URL but I get a 'no allowed' error message.
The URL comes like C:\\upload\images, but on chrome it looks like like C://upload/images.
How can I solve this problem?
#foreach (Product pro in Model.Products)
{
<div class="col-lg-4 col-md-6">
<div class="single-product">`enter code here`
<img class="img-fluid" src="#pro.ThumpNailPicture" alt="">
<div class="product-details">
<h6>
#pro.Name
</h6>
I'm not quite sure what you are asking, but in general it is best to serve content over HTTP rather than directly from local disk. This can be done either via the wwwroot folder or a dedicated static content server.