I want display image in my View. But file isn't found, file exist.
string file = Server.MapPath("~") + #"/App_Data/Plakaty/" + wyd.WydarzenieId.ToString() + ".jpg";
ViewBag.file_exist = System.IO.File.Exists(file);
I try: (Is display only alt:)
#if (ViewBag.file_exist == true) // it's TRUE
{
<img src="../../App_Data/Plakaty/1029.jpg" alt="p" />
<img src="~/App_Data/Plakaty/1029.jpg" alt="p1" />
<img src="#Url.Content("~/App_Data/Plakaty/1029.jpg")" alt="image"/>
<img src="#Url.Content("../../App_Data/Plakaty/1029.jpg")" alt="image2"/>
}
<img src="../../App_Data/Plakaty/1029.jpg" alt="p" />
Taking this as example, is App_Data really in the path for the image to the outside world? Sometimes internal paths are different.
Related
I use Vue. I try to output an image and it works fine when I use src but not when I use :src.
Works
<img src="../assets/image.png" />
Does not work
<img :src="`../assets/${image}.png`" />
What I've tried, but did not work
# first in the path.
~ first in the path.
./ first in the path.
/ first in the path.
require but it throws an error if the image can't load. I prefer the native broken image icon, which does not break the script.
My output
The variable image contains the filename which in this case would be image.
The output from both version is like below:
<img src="../assets/image.png" data-v-469af010=""> <!-- src -->
<img src="/img/image.f556f8c5.png" data-v-469af010=""> <!-- :src -->
For some reason they differ quite alot.
How can I solve it?
I solved this problem with this:
<img :src="cover(url)" /> // I call a method cover.
// Method cover
cover(url) {
if (url !== ''){ // You can check any matching expression.
try {
url = require('#/assets/img/' + url)
} catch (e) {
url = require('#/assets/img/default.jpg'); // I used a default image.
}
}
else
url = require('#/assets/img/default.jpg'); // Default image.
return url;
}
Bind src to the method.
getImgUrl(image) {
return `../assets/${image}.png`
}
in HTML
<img :src="getImgUrl(image)" />
If image variable is name of file
<img :src="'../assets/'+image" />
You should not use $ in template.
hiii i want to generate pdf of an invoice . pdf is generate but it can't display an image
i use laravel/snappy for window
here is my view file
<div>
<img src="{{ asset('image/logo.png') }}" class="pl-3" width="15%" />
Download PDF
</div>
here is my controller
if($request->has('download')) {
$pdf = PDF::loadView('pdfview')-
>save(storage_path('invoices/aazsaa.pdf'));
return $pdf->download('userlist.pdf');
}
image is shown in view but when i download image is not render
yehh i got the solution of my problem
i use base64 encoder to display an image
here is my view file
<img src="data:image/png;base64,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>
i change the src of image in tag. i just put base64 string of an image instead of path, and it's work
I changed the html "formatter" to embed my image using the following code:
#builder.div(:id => 'image') do
#builder << '<div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image"> </div>'
end
The HTML file has the following tag but there is no encoded image inside the HTML page.
div id="image"><div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image">
Now if I open this in a browser (Chrome), it does not show me the image. If I change this path above on my local laptop and point to an image, it works (i.e displays it correctly).
What am I missing ?
/home/abc/cert-image.png is a relative path from your HTML file. Nothing is wrong with the html or the formatter, but your path is likely wrong.
Try clicking where the image should be and opening the URL to the image in a new window. That will give you the absolute URL to where the img tag is pointing, and you can fix/debug from there.
EDIT
Ignore that, I found the error in your formatter:
#builder.div(:id => 'image') do
#builder << '<div style="float:center;"><img SRC="/home/abc/cert-image.png" ALT="Image" /> </div>'
end
EDIT 2
Since you just want to base64 encode the image with a data uri, you can do this:
require 'base64'
file = File.open("/home/abc/cert-image.png", "rb").read
b64 = Base64.encode64(file)
Then in your formatter:
#builder.div(:id => 'image') do
#builder << '<div style="float:center;"><img SRC="data:image/png;base64,' + b64 + '" ALT="Image" /> </div>'
end
I'm new to grails (1.3.7) and I've been put in a strange situation with displaying an image from the filesystem. The one.png picture is put into web-app/images/fotos directory. The zz.gsp:
<img src="${resource(dir:'images/fotos', file:'one.png')}" alt="Nothing" />
related to the void action def zz = {} works fine. But if I intend to display the same picture in rawRenderImage.gsp:
<body>
<p>
${fdir} <br/> ${fname} <!-- OK -->
</p>
<g:if test="${fname}">
<img src="${resource(dir:'fdir',file: 'fname')}" alt ="Nothing"/>
</g:if>
</body>
the picture doesn't appear inspite of the parameters fdir and fname pass to the page. The action in the controller is:
def rawRenderImage = {
// def basePath = servletContext.getRealPath("/")
// def basePath = grailsAttributes.getApplicationContext().getResource("/").getFile().toString() + "/images/fotos/"
// def basePath = grailsAttributes.getApplicationContext().getResource("/").getFile().toString()
// def fname = params.photoId + ".png"
// def fname = "/images/fotos/" + params.photoId + ".png"
basePath = "images/fotos" // or basePath=”images” for /images/one.png
fname=”one.png”
[fdir:basePath, fname:fname]
}
Even direct assigns basePath=”images/fotos” and fname=”one.png” don't work, as well as any combinations with basePath to obtain the absolute path. Even the case when I put the picture in images directory doesn't work. I use netbeans, but it also doesn't work in console mode.
Help please.
When passing in your filename and directory as variables in the model, don't quote them in your tag's src attribute. Then the Groovy ${} evaluation will evaluate to the variables and not as Strings.
<g:if test="${fname}">
<img src="${resource(dir:fdir,file:fname)}" alt ="Something"/>
</g:if>
I have built and MVC3 application with a controller (Picture) and an action method (GetImage) that returns File contents (in my case a jpeg image)
public FileResult GetImage(int pictureID)
{
return File(Server.MapPath("~/Content/pic" + pictureID + ".jpg"), "image/jpeg");
}
When I access images in my views like
<a id="single_image"><img src="/Picture/1" /></a>
..I get the image displayed properly.
But when I apply jQuery Fancybox plugin to this image and click on the image, it displays the pop-up with byte[] data inside (something you would get when the file mime type is missing).
What am I doing wrong?
PS: Sorry I am unable to post any images but can email it.
Just get your images directly using Html.Content in your View.
Forms
<a id="single_image">
<img src="<%= Html.Content("~/Content/pic" + model.pictureID + ".jpg") %>" />
</a>
Razor
<a id="single_image">
<img src="#Html.Content("~/Content/pic" + model.pictureID + ".jpg")" />
</a>
EDIT
If you're dead set on using a picture controller, then I would recommend having your PictureController have the Index action return an ActionResult
public ActionResult Image(int id)
{
var dir = Server.MapPath("/Pictures");
var path = Path.Combine(dir, id + ".jpg");
return base.File(path, "image/jpeg");
}
This will however slow down your requests over a direct .jpg file access.