I m trying to upload and show images.
I get the file, write it to docroot of glassfish application server, then
Image image = new Image("myimage","images/task.gif");
But i get <img wicket:id="myimage" src="resources/wickcat.MyPage/images/task.gif" />
Is there any way that wicket wont rewrite my src path? Even when i use an http://.... starting src, it writes resources/wickcat.MyPage/http://... which makes no sense at all.
I just need it to write "images/task.gif".
Any ideas?
There is two ways to do this.
Use <img src="images/task.gif" />. This is if you don't need reference to the component in the class.
Use ContextImage image = new ContextImage("myimage", "images/task.gif");. If you use the ContextImage component, the source will be relative to the Context root, you can even input a model as the relative path to the image.
The Image class assumes the image is a resource located in the classpath.
You could use a WebMarkupContainer with a SimpleAttributeModifier:
WebMarkupContainer img = new WebMarkupContainer("myimage")
.add(new SimpleAttributeModifier("src", "/images/task.gif"));
It will output the string as is, so you have complete control.
If it is used several times across the application, I'd recommend you to create a component encapsulating this behavior. Something like
public class MyImage extends WebMarkupContainer {
public MyImage(String id, String path) {
add(new SimpleAttributeModifier("src", path));
}
}
Related
i am trying to set an image in to a razor page in MAUI Blazor.
In MAUI (only), there was the aproach, that you have a .svg image in the folder Resources/Images. MAUI then converts the .svg image in a .png image which you can use in the XAML file. like so:
Now i have the same picture in a MAUI Blazor app and i hoped that i can put my picture in the same way expect that i have to use the HTML style like so:
<img src="one_list2.png">
But this doesn't work at all. I tryed with or witout path, path with slashes, backslashes etc. nothing works.
Trying to put a .png image into the wwwroot folder works. But this isn't the goal. I found it very nice to put a svg image which is then converted into a png depending of its size. This way all pictures would be converted exactly in the perfect size you will need lossless.
Thanks
First, Add the image to Resources\Raw and set it to MauiAsset compilation type
Second, Check the project file to avoid setting the image in the other folder.
In razor component HTML:
<img src="#imageSource">
In the code part:
private string? imageSource;
protected override async Task OnInitializedAsync()
{
try
{
using var stream =
await FileSystem.OpenAppPackageFileAsync("testimage.png");
using var reader = new StreamReader(stream);
byte[] result;
using (var streamReader = new MemoryStream())
{
stream.CopyTo(streamReader);
result = streamReader.ToArray();
}
imageSource = Convert.ToBase64String(result);
imageSource = string.Format("data:image/png;base64,{0}", imageSource);
}
catch (Exception ex)
{
//error
}
}
More information you can refer to ASP.NET Core Blazor Hybrid static files.
It seems Aurelia is not aware when I create and append an element in javascript and set a custom attribute (unless I am doing something wrong). For example,
const e = document.createElement('div');
e.setAttribute('custom-attr', 'some value');
body.appendChild(e);
Is there a way to make Aurelia aware of this custom attribute when it gets appended?
A little background: I am creating an app where the user can select their element type (e.g. input, select, checkbox etc.) and drag it around (the dragging is done in the custom attribute). I thought about creating a wrapper <div custom-attr repeat.for="e of elements"></div> and somehow render the elements array, but this seemed inefficient since the repeater will go through all the elements everytime I push a new one and I didn't not want to create a wrapper around something as simple as a text input that might be created.
You would have to manually trigger the Aurelia's enhance method for it to register the custom attributes or anything Aurelia related really. And you also have to pass in a ViewResources object containing the custom attribute.
Since this isn't as straight forward as you might think, I'll explain it a bit.
The enhance method requires the following parameters for this scenario:
Your HTML as plain text (string)
The binding context (in our scenario, it's just this)
A ViewResources object that has the required custom attribute
One way to get access to the ViewResources object that meets our requirements, is to require the custom attribute into your parent view and then use the parent view's ViewResources. To do that, require the view inside the parent view's HTML and then implement the created(owningView, thisView) callback in the controller. When it's fired, thisView will have a resources property, which is a ViewResources object that contains the require-d custom attribute.
Since I am HORRIBLE at explaining, please look into the example provided below.
Here is an example how to:
app.js
import { TemplatingEngine } from 'aurelia-framework';
export class App {
static inject = [TemplatingEngine];
message = 'Hello World!';
constructor(templatingEngine, viewResources) {
this._templatingEngine = templatingEngine;
}
created(owningView, thisView) {
this._viewResources = thisView.resources;
}
bind() {
this.createEnhanceAppend();
}
createEnhanceAppend() {
const span = document.createElement('span');
span.innerHTML = "<h5 example.bind=\"message\"></h5>";
this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources });
this.view.appendChild(span);
}
}
app.html
<template>
<require from="./example-custom-attribute"></require>
<div ref="view"></div>
</template>
Gist.run:
https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9
Additional resources
Dwayne Charrington has written an excellent tutorial on this topic:
https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
I can't understand why I cannot change picture (background of field and image of imageview) from this method:
private void loginCheck(String loginText){
String login = loginText.trim();
if(login == null || login.equals("")) {
loginField.setStyle("-fx-background-image:url('images/registration_login_wrong.png');");
logoTick.setStyle("-fx-image:url('images/registration_wrong.png');");
logoTick.setVisible(true);
}else{
loginField.setStyle("-fx-background-image:url('images/registration_login_right.png');");
logoTick.setVisible(false);
}
}
CSS code for logoTick is:
.login_tick{
-fx-image:url("images/registration_tick.png");
visibility:false;}
Everything besides -fx-image and -fx-background-image seems to work fine. I also changed background image in another class(of a label) and didn't encounter any problems. That's why I can't understand what can be possibly wrong. I checked images location and name everything seems correct. If I manually replace the image path in CSS it is working, but from the code images just disappear.
The paths in the CSS url(...) function are treated as relative paths; the location to which they are relative is different in a stylesheet and in an inline style. From the CSS documentation:
If the style appears in a stylesheet, the path is relative to the base
URI of the stylesheet. If the style appears in an inline style, the
path is relative to the root of the classpath.
Without knowing your project layout, it's not possible to give you the correct paths for the images, but that should be enough to figure it out.
Alternative Solution
An alternative solution is to define all the styles in CSS, and to manipulate the style class in the Java code to select the appropriate style. I like to use JavaFX 8 CSS PseudoClasses to do this:
.login-field:login-incorrect {
-fx-background-image: url('images/registration_login_wrong.png');
}
.login-field:login-correct {
-fx-image:url('images/registration_login_right.png');
}
.login_tick {
-fx-image:url("images/registration_tick.png");
visibility:false;
}
.login_tick:login-incorrect {
-fx-image:url('images/registration_wrong.png');
visibility: true ;
}
And then the Java code looks like:
private void loginCheck(String loginText){
String login = loginText.trim();
boolean loginIncorrect = (login == null || login.equals("") ;
PseudoClass loginIncorrectPsuedoClass = PseudoClass.getPseudoClass("login-incorrect");
PseudoClass loginCorrectPsuedoClass = PseudoClass.getPseudoClass("login-correct");
loginField.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorrect);
loginField.pseudoClassStateChanged(loginCorrectPseudoClass, !loginIncorrect);
logoTick.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorret);
}
The advantage of this approach is that all style information is stored in the CSS file; the Java code just changes the selector used for the UI elements.
In other platforms i could just use something like [Embed(source="logo.gif")] or #:bitmap, but it seems there is no option for that for Windows/Other Cpp platforms.
I tried to use the EmbedAssets lib but it's outdated.
I also tried using the nmml file resource tag. With this i could get the image as haxe.sys.io.Bytes, but to use i need to convert haxe.sys.io.Bytes to nme.utils.ByteArray. I have not found a way to do this.
So, what can i do to embed images on a haxe/nme project when deploying to Windows?
In addition to openfl.Assets, OpenFL supports #:bitmap, #:sound, #:font and #:file embed tags.
The former requires <assets path="to/assets" /> in your project XML file, and on Windows, will copy the files alongside your executable.
The embed tags require that your asset files are in your source path based on the way they are embedded, so use <source path="to/assets" /> in the project file.
Here is an example that uses the #:bitmap tag:
package;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
#:bitmap("nme.png") class Image extends BitmapData {}
class Main extends Sprite {
public function new () {
super ();
var bitmap = new Bitmap (new Image (0, 0));
addChild (bitmap);
bitmap.x = (stage.stageWidth - bitmap.width) / 2;
bitmap.y = (stage.stageHeight - bitmap.height) / 2;
}
}
Using embed tags, the asset will be inside your executable.
With NME or OpenFL you should just be able to call Assets.getBitmapData("assets/myImg.png"); without needing to add the assets to the NMML file (though you may need to add <assets path="Assets" rename="assets"/> or rename the assets directory). You should then be able to add this bitmapData to a bitmap object on the display list.
For example:
var bd:BitmapData = Assets.getBitmapData("assets/myImg.png");
var bitmap:Bitmap = new Bitmap(bd);
addChild(bitmap);
I have saved an image to a byte[] in a command object and wish to display it in the next stage of the createFlow webflow.
I am trying to steer clear of using the file system and / or database system for storing the image during the webflow.
Typically, to view the image, I would call renderImage from the gsp:
class ArtefactController {
def createFlow = {
............
}
def renderImage = {
def ArtefactInstance = Artefact.findById(params.id)
if(ArtefactInstance?.image) {
response.setContentLength(ArtefactInstance.image.length)
response.outputStream.write(ArtefactInstance.image)
}
else {
response.sendError(404)
}
}
however for the webflow when I try to call renderFlowImage from a gsp:
def renderFlowImage = {
if(flow.artefactCommand?.image) {
response.setContentLength(flow.artefactCommand.image.length)
response.outputStream.write(flow.artefactCommand.image)
}
else {
response.sendError(404)
}
}
The flow scope in not accessable.
Any suggestions?
I assume you're hitting the renderFlowImage action in your flow's view with a second http request via an img tag such as:
<img src="${createLink(action:'renderFlowImage')}" />
This won't work because, for one thing, you need to pass in a 'flowExecutionKey' which grails uses to match a request with a flow.
It is possible to work around this, but you might be better off just rendering the image during the rendering phase of your flow's next view with a data URI in the img tag. You could do this easily with the rendering plugin, which provides some handy tags (among other things) to render inline images using a data uri.
So in the next flow view, you could replace the existing img tag with a call to one of the rendering plugin's 'inline' tags:
<rendering:inlineJpeg bytes="${artefactCommand.image}" />
But be careful - there are some limitations to the data URI approach to be aware of (see http://www.7cynics.com/webdesign/css/css-inline-images-data-uri.html).