I'm working on a requirement where I planned to dynamically set the URL on load of the component.
I have a tag where the src attribute will be set from a service call which would return image. If the image is not present I need to set a fallback image. How can I handle this.
The image is in binary code format(.png) image
I had a similar problem. This is my solution :
1)For the image you set a dynamic src like this :
< img :src="image" >
In the data you set image to the url or relative path of the image you want to use as a default. Like this :
Data() {
return {
image : "path",
}
}
You preload the default image your main html file, like this :
< link rel="preload" type="image" or type="img/png" href="path" >
To change the image to the image in the axios call you just write :
this. image = messageImg
I hope this is helpfull.
I have this image tag
<img :src="getImage('450')" style="height:50px;width:50px;">
Here 450 is the image id that i want to get i'm able to get this image name in the getImage function and i want to render the image which is returned by getImage method but current scenario is image name is being returned but image is not rendered inside image tag.
async getImage(id){
await axios.get(`/get-img?id=${id}`).then((response) => {
return response.data.image;
})
Image is stored in public/storage/image folder. Any help is highly appreciated.
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
My app has a bunch of images stored as blobs in the local SQLite Database. These images are taken with the device camera. I'm using Titanium Alloy, so the image was saved using the .save() method an Alloy Model.
I've started using the TiSocial module that can post an image to Twitter or Facebook. One its parameters is image and it has to be:
a local/remote path to an image you want to share
The image I want to use is set as the image property on an ImageView. The ImageView image is set like this: $.theImageView.image = args.the_image;, where args.image is the image blob, taken from the database collection.
I tried to take this image blob and set it as the image on the TiSocial module initialisation method:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: args.the_image,
removeIcons:"airdrop,print,copy,contact,camera"
});
Alternatively I tried to take use the image saved on the ImageView, like this:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: $.theImageView.image,
removeIcons:"airdrop,print,copy,contact,camera"
});
However neither of these worked, and no image appears in the Tweet or Facebook message dialogs. And no error appears in the console.
On the other hand, if I set the image property to an image saved in the assets folder, then it works just fine. For example:
`image: "an_image.jpg"`
I tried a solution mentioned in the comments below, which was to save the image to Ti.FileSystem, and then read the image from there. However, this still did not work.
You could try sharing remote images this way...
var largeImg = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : 'auto',
image :'http://www.google.com/doodle4google/images/splashes/featured.png'
});
var imageGoogle =largeImg.toBlob();
// share image
Social.activityView({
status : "Hello world! Take a look at this: ",
image : imageGoogle,
removeIcons:"airdrop,print,copy,contact,camera"
});
then i would suggest to add one field called img_path in your database table because you can not get path from blob so when you store any blob to alloy model then also add its path to that model so you can retrieve it later and can share.
Hope you understand.
I had some luck by saving the file to the Ti.Filesystem, and then later retrieving it and using the .getNativePath() method:
function getImage() {
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, args.alloy_id + '.jpg');
return f.read();
}
var theImage = getImage();
Social.activityView({
text: "Just tried this beer called " + args.name,
image: theImage.getNativePath(),
removeIcons:"airdrop,print,copy,contact,camera"
});
I need to close a flash player which is overlayed over another portion. When the video is over, the 'div' i created (overlayed to display video)must vanish showing the orginal content. tried everything.
You can use a javascript function to remove the opened <div> from the DOM tree.
For this use the Externalinterface.call method. You just need to create a javascript function and embed the flash object with the allowscriptaccess option set to always.
The JavaScript function could be like this:
function removeDiv( divID ) {
var div = document.getElementById(divID);
div.parentNode.removeChild(div);
}
And the corresponding ActionScript:
ExternalInterface.call("removeDiv", "theIdOfTheDiv");