I am trying to make a quiz app and I am using the MEAN stack.
my server will send an object containing details pertaining to the questions - answers, image, question text. I wish to send a link to the ejs file which will then display the image referenced by that link.
I googled around to find some material on this issue but was unable to find any which address this topic.
I tried a few different method and the one below worked:
1) Add the link to the image in the object to be passed by the server
var objCard = {
QuestionText:"What is the indicated sign?",
ImageLink: "/assets/images/dummy.jpg"
}
2) Inside the ejs file use <%= %> from within the img tag
<img src="<%= objCard.ImageLink %>">
Related
For the <title> I've followed this SO answer This is working perfectly for part but the image is not working
Laravel dynamic page title in navbar-brand
But, Here when I try to make an image dynamic instead of title it's giving me a text instead of an image.
For instance,
header.blade.php
#yield('image')
In another blade, I called image as in section
#section('image', '<img src="http://localhost/appname/public/front/images/heading.png">')
Every page has a dynamic logo so I want to put logo dynamic the same like we're doing in the title.
But the result I'm getting is
<img src="http://localhost/appname/public/front/images/heading.png">
You can do like this
#section('image')
<img src="http://localhost/appname/public/front/images/heading.png">
#endsection
I am now loading all the images via my template when the image loads
//For example, I will just pass the image url into the tempate when the page renders
%div{class: "img_container <%= answer.image_scale %> <%=answer.show_image%>"}
<% if (media_con.standard_resolution) { %>
%a.fancy{href: "<%= media_con.standard_resolution %>"}
%img{src: "<%=media_con.standard_resolution%>"}
I realize that by doing this (esp if I am loading many images on the page), it causes inefficieny esp apparent on the mobile web.
How can I load images only when they are in view (scrolling), maybe just load a thumbnail image and load the actual image when the view with the image comes to view.
Any advice here is appreciated
There are a number of libraries to achieve this. I've personally used the Lazy Load Plugin for jQuery (demo). Instead of setting <img src> property in the template, you should set a property called data-original to the url of the image:
%img{data-original: "<%=media_con.standard_resolution%>", src="placeholder.png"}
And on the client side code (perhaps in Backbone.view.render) you initialize the library:
$("img[data-original]").lazyload();
I am displaying an image obtained from a database (stored as a long blob) in an img tag using the following method:
<img src="http://localhost:3000/show_image/265" />
The show_image function takes the image data from the database and renders it to the img tag using the send_data method.
When applying Fancybox onto the img tag, the data is displayed as BLOB data not the image..
Can anyone suggest a reason why? Or how I can solve this?
1) You have to apply fancyBox to the links (not the images) and the structure should be like this -
<a class="fancybox" href="big_image"><img src="small_image" /></a>
Example - http://jsfiddle.net/CYCeM/.
Well, it is actually possible to have only images, but then you have to use "data-fancybox-href" attribute to specify the large one - http://jsfiddle.net/6ZSWB/
2) Looks like the script would not be able to guess the content type from your hrefs. You have to either -
a) Create links having extension, e.g., "http://localhost:3000/show_image/265.jpg"
b) Set content type for fancybox, example - $('.fancybox').fancybox(type : 'image');
setting :type => "image/jpg" fixed the issue. I looked up the MIME content types and realised it was incorrectly written.
I wondered if it is possible to show picture in a view without calling an action. The picture is displayed by using the following Razor code:
<img class="photo" src="#Url.Action("GetImage", "Home", new { id = #Model.Id })" />
But retrieving picture from server requires an additional request.
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
Thanks,
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
You could use the Data URI scheme. But be careful as it might not be supported by all browsers.
Example:
<img class="photo" src="data:image/png;base64,iVBORw0KG....." alt="" />
where src attribute of the image contains the Base64 encoded image that could come from ViewBag or a view model.
How do I display the image in a view?
The documentation says:
<%= image_tag formatted_photo_path(#photo, :jpg) %>
This is not what I want.
I just want to display an image on a view I don't care about the url.
E.g., Avatar.
Do I need to write a path to the directory or is a method already made?
/public/images/avatar/id
Thank you
Does the example above not render something like this to the view?
<img src="/path-to-generated-image.jpg"/>