Hi I have the following html inside one of my javascript files.
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div id="infoWindowString">'+
'<img src="assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See more info</p>'+
'<p>see news</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
The problem is I cannot get the image to show up in the info window.
I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.
EDIT- Changed to following after the response below:
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div class="infoWindowString">'+
'<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See Menus</p>'+
'<p>Upload a Menu</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
But image still not showing up :(
If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.
The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.
For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:
<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>
You can get that path anywhere in jQuery using
var imageUrl = $('a#image_link').data('image-url')
You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at
http://example.com/assets/images/rails.png
but you are currently at
http://example.com/something/somepage.html
the browser will try to load it from
http://example.com/something/assets/images/rails.png
and it will fail.
You should be using an absolute URL.
Related
I want to be able to call the first image from a folder. The reason behind this is that the file name will always be changing as the user will be able to put whatever image they want inside of the template.
Using PHP:
Step 1
use glob() function to search for all the pathnames matching pattern for image extensions {jpg,png,gif} inside your directory path using GLOB_BRACE
Step 2
Confirm atleast one image is found
Step 3
Use img tag to display the image
<?php
$images = glob("path/to/your/folder/*.{jpg,png,gif}", GLOB_BRACE);
if(isset($images[0]) && file_exists($images[0])){
echo '<img src="'.$images[0].'"/>';
}
?>
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I have a class name 'MonthReport.class.php' and its structure like the following:
class MonthReport{
.....
//some member variables
public function pieChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function lineChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function render html(){
$html.=str1<<<
.....
//some html code
str1;
$html.=<<<str2
<img src="$this->pieChart()" /> //can not work
str2;
}
}
when I call the pieChart() function with this in the place src it will overwrites my entire page and just shows the image.how can I do this?
I try to render the image in a separate page but the image need some specified user data eg.'userId'.in others words when i new a object, it specify the userId,so I can not render the image in a separate page.
sorry for my bad english!but I need your help!thanks in advancd!
Your question is a little unclear but if your problem is what I am assuming it to be, then I used to have similar issues (Graphic created that is just an image with all of the rest of my page content not displaying). My solution was to generate a temporary image using pchart then embed that file in the html
$myfilename = "temp_image.png"; // temp file name
$myPicture = new pImage(700,500,$myData);
// other image creation code....
$myPicture->Render($myfilename); // generate image "temp_image.png"
$image_html = '<img src="' . $myfilename . '">'; //generate the link
print("$htmlline");
Again there is some guesswork going on here as your question is unclear. The above works for me though and enables me to embed an image created on the fly by pChart into my php pages.
I have a ruby on rails web app, and in some views i have many heavy images( <img> ) to render .The <img> are generated in a Helper.
The problem is that the css is loaded first, then the js, then the heavy images , and then finally the css refereneced background images.
It takes quite a while for all of the heavy images to load, which therefore holds the whole site up.
I want to load first the css background images then load the other images, as they obviously hold visual structure of the page.
rails version: 2.3.8
EDIT:
Thank you guys, I apologize for not having shared the code earlier.
I have two models : Categories and Images, each Category has many images.
In the view i have a list of categories, which is generated by a helper :
categories.each do |cat|
html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end
and when I click on the category the images are displayed
categories_images.each do |i|
html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
end
I have css background image associated to the list of category
The problem is that the images (<img>) is displayed before the css background images of the list of categories.
We need to assume things because you haven't shared your code.
Coming to your query, for now you can preload images using jQuery:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
This saves the loading time of loading images.
Use a base64 string.
Example:
background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
without: **
online converter: http://webcodertools.com/imagetobase64converter
note: I only would suggest this if the image size is not too heavy.
Solution: Do not use the img tag.
Create a sprite containing all your images. Load the sprite in your application.html layout once.
Use data uris to transmit the data directly in the html. See http://css-tricks.com/data-uris/
My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.
<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />
<!-- the following would be in your js file -->
$lazy = $('img.lazy');
$(window).load(function(){
// window load will wait for all page elements to load, including css backgrounds
$lazy.each(function(){
// run thru each img.lazy on the page. spare the jquery calls by making $this a variable
$this = $(this);
// if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
});
});
i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">
Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.
i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.
First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.
The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.
Back to your question: you can use ${pageContext.request.contextPath} for this.
<img src="${pageContext.request.contextPath}/images/pageSetup.gif">
See also:
How to use relative paths without including the context root name?
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
You can't write JavaScript in the src attribute. To do what you want, try some code like this:
var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);
Here the target; the place where you want to display the image, is a div or span, with the id display.
Demo
With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:
<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>
Demo
Do not use this.
You must use JavaScript for this.
First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:
<img src="empty.gif" real_src="/images/pageSetup.gif" />
Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:
var contextPath = "/MyRealWeb";
window.onload = function() {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var realSource = image.getAttribute("real_src") || "";
if (realSource.length > 0)
image.src = contextPath + realSource;
}
};