Loading image using variable containing base64 data in AngularJS
I am trying to find the right way to load a image source from a variable containing base64 encoded image data (for example pulled from a canvas using toDataURL(); ).
At first I just tried it like this:
<img src="{{image.dataURL}}" />
where the image is a scope variable with a variable dataURL containing the base64 data. This is actually working pretty well, the only problem is that I get a 404 error in my console. Something like this:
GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404 (Not Found)
Not so pretty. When I tried a more angular style solution like this:
<img data-ng-src="image.dataURL" />
the images are not loading at all.
I made a fiddle which you can find HERE
Any suggestions how to get rid of this error in my console?
EDIT:
Gruff Bunny was right. This <img data-ng-src="{{image.dataURL}}" /> is working...
Working solution can be found HERE
The content of the ng-src needs to be interpolated: Try this:
<img data-ng-src="{{image.dataURL}}"/>
I admit I spent way too much time trying to fix similar problem,
my problem was I had extra brace here (see three braces at end):
ng-attr-src="{{aad.form.imageBase64Temp}}}"
Related
I'm showing images from resources/static/images/
The weird thing is if I give the path like "/images/milk.png", it shows the image but if I get name from ${}, it doesn't work.
<img class="card-img-top"
th:src="#{/images/${res.getLogo().getUploadFileName()}}"
th:alt="${res.getLogo().getUploadFileName()}" />
it seems res.getLogo().getUploadFileName() is working well. So it will be replaced like /images/milk.png. But it doesn't show the image...
How can I fix this?
One more thing, I know basic Thymleaf path is resources/templates, but how it recognize image when I gave like "/images/milk.png"
If u want to upload static images
th:src="#{images/} + ${res.logo.uploadFileName}"
if you want to upload dynamic images
th:src="#{https://~~~.com/} + ${id}
I am retrieving text which contains images saved in WYSIWYG editor(Summernote). Is there a way to replace src attribute value in img tags using asset()?
Example:
<img src="images/image.jpg"/>...
To:
<img src="https://.../images.jpg"/>
I want solution which would cover all bases: spaces in image name, different extensions...
Sure, just use the curly brace syntax in your blade to render the asset()
<img src="{{ asset('whatever_you_want') }}"/>
I don't think you can do it in Blade. You could, in your model, add a function that replaces all images to full paths. This could be done through a regex pattern that looks for URLs in tags.
I would, however, make sure the full path to the image is included in the text in the database. This way, you always have access to the right path to the image, and you're not relying on a piece of code to display the right image.
I am using flux and fluid content element for making content editable by user. i added field for image which allows multiple images to upload.
But now i am not able to show these images.
my value of field image is like :
image => 'kip.jpg,772_Visteon_010.jpg'
normally if i have only one value then i can show it by <f:image> or <img src="{image}" /> Tag.
so, anybody have idea how can i display multiple images or files.
Thanks in advance.
you seem to use the old style of image inclusion: comma separated list of names with copies below uploads/.
Then you need to split (https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Split/Index.html) the field and work the resulting array as before.
in the long time you should use FAL, so the handling is a little bit more complex
You should use flux inline fal for multiple images in fluid content element,
below is a syntax for inline fal,
<flux:field.inline.fal name="settings.image" label="Image" />
After that you can render it by following code,
<f:for each="{v:content.resources.fal(field: 'settings.image')}" as="image">
<f:image treatIdAsReference="1" src="{image.id}" title="{image.title}" alt="{image.alternative}"/><br/>
</f:for>
you can find detail in below url,
https://fluidtypo3.org/viewhelpers/flux/master/Field/Inline/FalViewHelper.html
hope this will help you.
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.
<img src="/images/example.png" alt="example" />
Shows up when written in the template (i.e. indexSuccess.php), but only displays the alt when used in layout.php. What is going on here?
Thanks.
It was an image path problem. The problem was that layout was being applied to different urls: e.g. example.com/ / example.com/admin.php, so the relative path of image/example.png did not work for all the cases. Maerlyn mentioned in the comments the use of image_path() helper function. With that the problem was solved.
TL;DR:
Use image_path() in the layout (doesn't hurt to use in templates as well, i suppose)