How to dynamically set the URL of a img src attribute from axios service call in Vue JS - vuejs2

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.

Related

vue-cropperjs is not refreshing when adding new photo

I'm using this input for adding new image
<input type="file" id="profile_photo_add" ref="profile_photo_add" #change="createProfilePhotoPreviewInAdd"/>
<vue-cropper
v-if="urlProfilePreviewAdd"
ref="cropperAdd"
:src="urlProfilePreviewAdd"
alt="Source Image"
:aspectRatio="16/9"
:initialAspectRatio="16/9"
:autoCropArea="1"
:zoomable="false"/>
And this method for creating object url for cropper
createProfilePhotoPreviewInAdd(e)
{
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
console.log(this.urlProfilePreviewAdd)
console.log(this.$refs.cropperAdd)
}
First time when i upload a image, the cropper shows that image, if i'm trying to upload other image, the cropper doesn't refresh.
If i console.log the cropper ref and the urlProfilePreviewAdd i see that urlProfilePreviewAdd is changing but the cropper ref target stays the same as first time.
How to update in real time with the input, the cropper too?
SS for console.logs
Take a look to ss for console.logs too here.

You must call the replace function on the cropper instance as noted in the documentation
Replace the image's src and rebuild the cropper.
setImage(e) {
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
this.$refs.cropper.replace(this.urlProfilePreviewAdd);
},

Dispalying a base64 string as an image vue.js

I am getting an image as base64 string from backend server. i would like to convert it into an image and display the same. I have tried the following:
Inside JS
let previewLogo2 = new Image();
previewLogo2.src = `data:image/png;base64,${fileList[i].file}`;
Inside template
<b-img :src="previewLogo2" class="certificate-logo-size logo2 pt-2"></b-img>
I am using bootstrap vue.

I have solved the issue by binding to previewLogo2.src instaed of previewLogo2
Inside JS
let previewLogo2 = new Image();
previewLogo2.src = `data:image/png;base64,${fileList[i].file}`;
Inside Template
<b-img :src="previewLogo2.src" class="certificate-logo-size logo2 pt-2"></b-img>

Image (from url) loading again in other component

I have two scenes in my app (react-navigation).
Scene 1: Flat List with an Image per row
Scene 2: Same Image with some more details
If I am navigating from Scene 1 to Scene 2 the component is always loading the Image again.
Why does the Image-component not use the Image from the cache? On other components (without navigating) the Cache is working. Cache-Control is set to max_age=2592000.

If the image(s) are static, you can import and export them from a single file:
export default class Images {
static image1 = require("../public/images/image1.jpg");
static image2 = require("../public/images/image2.jpg");
}
You can use a tool like https://github.com/wcandillon/react-native-static-images to script this for you.

Selenium: Need valid image location/path of an image file placed on a website

I am able to find img tag using iwebdriver.findElement() query. Image contains captcha.
I also get the src attribute which contains the url of image but it is not working when i open it it gives me 404 error.
This is the img tag i am looking for and i need its valid image path.
{img src="https://EU1.client.hip.live.com/GetHIPData?hid=EU1.d3f00459fcb444fc8efb402f3c2dc237&fid=bbc4f6c344e7434c9b712c2d80f7268c&id=274850&type=visual&hdid=0&rnd=1798e82f1c7d4d51922f1a58c03c4d74" style="display: inline; width: 218px; height: 48px;" id="wlspispHIPBimg05f4e37f6e1bc431d8c335e2d169a0f440"}
// Assuming webdriver is set and running
IWebdriver _driver=new firefoxdriver(capabilities);
_driver.Navigate().GoToUrl("http://www.bing.com/toolbox/submit-site-url");
IWebElement img_tag = _driver.FindElement(By.CssSelector("img[style='display: inline; width: 218px; height: 48px;']"));
// Now i have the entire img tag required which contains a image.
string source_path=img_tag.GetAttribute("src");
// Now i have src url of image. but it does not show the image when i go to this source path. This is the relative path of the image i think.

I've opened the page you'r visiting. As you're trying to get captcha image. You won't be able to get image from captcha image source.
You have to get screenshot of page and crop the captcha image.
Don't use css selector with width and height. Some pages are responsive, it will put you in trouble. Use XPath instead.
public Image GetCaptchaImage()
{
Image imgCap = null;
try
{
var arrScreen = driver.GetScreenshot().AsByteArray;
using (var msScreen = new MemoryStream(arrScreen))
{
var bmpScreen = new Bitmap(msScreen);
var cap = driver.FindElement(By.XPath("//div[#id='ispHIPHIP']//img"));
var rcCrop = new Rectangle(cap.Location, cap.Size);
imgCap = bmpScreen.Clone(rcCrop, bmpScreen.PixelFormat);
}
}
catch
{
}
return imgCap;
}

Titanium JS: cannot use an image stored in SQLite Database in TiSocial module

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"
});