ionic 4 capacitor camera plugin after taking a picture and then sanitizing but still getting this error:
SafeValue must use [property]=binding: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4UHuRXhpZgAATU0AKgAAAAgABgEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAIcuocAAcAAAgMAAAAZgAAEOQAAAEsAAAAAQAAASwAAAABHOoAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA....
here is my method in .ts file:
import { Component, OnInit } from '#angular/core';
import { Plugins, CameraResultType, CameraSource} from '#capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '#angular/platform-browser';
const { Camera } = Plugins;
constructor(
public sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.takenImg = this.sanitizer.bypassSecurityTrustResourceUrl(image.dataUrl);
}
and in .html file:
<ion-item>
<span (click)="takePicture()">Camera</span>
</ion-item>
<ion-item>
<ion-img [src]="takenImg" alt=""></ion-img>
</ion-item>
I use a standard <img> tag for this rather than the <ion-img> tag and I don't need to sanitize:
<img [src]="image.dataUrl"/>
Related
I am trying to use Cypress for component testing in my Vue app. I am using the vue-i18n library to provide localisation for the app. When attempting to test the rendering of my loading spinner component, I am getting the following error from the vue-i18n library:
SyntaxError: Need to install with `app.use` function
at createCompileError (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:183:17)
at createI18nError (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:2625:10)
at useI18n (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:4231:11)
Previously to this, I was getting an error from Pinia. I resolved this by adding the following to cypress/support/component.ts:
import { createPinia, setActivePinia } from 'pinia';
setActivePinia(
createPinia()
);
My LoadingSpinner component code is as follows:
<script setup lang="ts">
import { computed } from "#vue/reactivity";
import { useLocaleStore } from "#/stores/locale";
//props
const { i18n } = useLocaleStore();
</script>
<template>
<div class="d-flex justify-content-center m-5">
<div
class="spinner-border text-primary"
:style="{ width, height }"
role="status"
>
<span class="visually-hidden">{{ i18n.t("loading") }}</span>
</div>
</div>
</template>
And the test code:
import LoadingSpinner from "../../src/components/ui/LoadingSpinner.vue";
describe("LoadingSpinner", () => {
it("renders", () => {
cy.mount(LoadingSpinner);
});
});
/stores/locale:
import { computed } from "vue";
import { defineStore } from "pinia";
import { useI18n } from "vue-i18n";
export const useLocaleStore = defineStore("locale", () => {
const i18n = useI18n({
useScope: "global",
inheritLocale: true,
});
const currentLocale = computed(() => i18n.locale);
const locales = computed(() => i18n.availableLocales);
return { i18n, currentLocale, locales };
});
I found this github release that implies I need to add vue-i18n as a plugin to the mount() call, but I can't work out how to do it. Does anyone know a solution?
I am trying to install leaflet toolbar with vue3 but it not working
there are package available for vue2 but nothing available related to vue3.
I tried to implement the same using javascript but it is not helping
So if any have used it leaflet with vue3 using package or javascript code please let me know
Below is the screenshot of what I am trying to achieve using leaflet
enter image description here
Below is the code using which I got leaflet map working
`
<template>
<div id="mapContainer"></div>
</template>
<script>
import 'leaflet/dist/leaflet.css';
import "leaflet-draw/dist/leaflet.draw.css";
import L from 'leaflet';
import "leaflet-draw/dist/leaflet.draw-src.js";
export default {
name: "LeafletMap",
data() {
return {
map: null,
};
},
mounted() {
this.map = L.map("mapContainer").setView([51.5072, 0.1276], 5);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors',
}).addTo(this.map);
//use a mix of renderers
var customPane = this.map.createPane("customPane");
var canvasRenderer = L.canvas({ pane: "customPane" });
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
},
onBeforeUnmount() {
if (this.map) {
this.map.remove();
}
},
};
</script>
`
Getting this error while setup. Here is my setup in images.
package.json
where i am using it
and called it like this in the file above this line.
The code below this line is the code that is available in the official doc
https://www.npmjs.com/package/vue-filepond
FilePondDemo.vue
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
label-idle="Drop files here..."
v-bind:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
server="/api"
v-bind:files="myFiles"
v-on:init="handleFilePondInit"
/>
</div>
</template>
<script>
// Import Vue FilePond
import vueFilePond from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
// Please note that you need to install these plugins separately
// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
// Create component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview
);
export default {
name: "app",
data: function () {
return { myFiles: ["cat.jpeg"] };
},
methods: {
handleFilePondInit: function () {
console.log("FilePond has initialized");
// FilePond instance methods are available on `this.$refs.pond`
},
},
components: {
FilePond,
},
};
</script>
I'm using ionic 5 and angular 11 for front-end and for back-end laravel api crud,
for my back-end it works good
I could not get any error in this problem I cant display data in page but I get it in console
this is my page annonce.ts**
import { Component, OnInit } from '#angular/core';
import { AnnonceService } from '../annonce.service';
#Component({
selector: 'app-annonce',
templateUrl: './annonce.page.html',
styleUrls: ['./annonce.page.scss'],
})
export class AnnoncePage implements OnInit {
productData:any;
constructor(
private service:AnnonceService,
) { }
ngOnInit() {}
ionViewWillEnter(){
this.getAllProduct()
}
getAllProduct(){
this.service.getAllProduct().subscribe(res=>{
console.log(res)
this.productData=res
this.productData = Array.of(this.productData);
})
}
deleteProduct(id){
this.service.deleteProduct(id).subscribe(res=>{
console.log(res)
this.productData=res
//mise a jour d'annonce
this.getAllProduct()
})
}
}
and this is annonce.service.ts
getAllProduct(): Observable<Product>{
return this.http.get<Product>(this.api_URL).pipe(retry(2), catchError(this.handleError)) }
and this is annonce.html
<ion-list>
<ion-item-sliding *ngFor="let item of productData">
<ion-item>
<ion-label>
<h2>{{item.title}}</h2>
<h2>{{item.descripton}}</h2>
<p>{{item.price}}</p>
</ion-label>
<ion-note slot="end">
detailleProduct
</ion-note>
</ion-item>
<ion-item-options>
<!--edit-->
<ion-item-option>
<ion-icon slot="icon-only" name="create" [routerLink]="['/','edit-annonce', item.id]"> </ion-icon>
</ion-item-option>
<!--delete-->
<ion-item-option color="danger">
<ion-icon slot="icon-only" name="trash" (click)="deleteProduct(item.id)"> </ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
image of browser
I guess your this.productData is not properly handled. In your response you get this data which you logged to the console and assign to this.productData:
{
data: [{...}] some array,
links: {...},
meta: {...}
} // response object
In the next line this.productData = Array.of(this.productData); you assign this to this.productData (remark the []):
[{
data: [{...}],
links: {...},
meta: {...}
}]
// array of responses
You probably want to do this to get your data out of the response
this.productData = res.data;
I am trying to dynamically load a tab component based on screen resolution. I have a service with an observable with values: xl, md, sm, xs. The component initially loads on xs and then unloads on screen resizes. The problem is when you resize the screen back to under 768 (xs) the component is not fully materialized. I can see that the component is injected into the DOM on the second load, but it appears the directives are not rendered.
Plnkr - Try sizing the display full width, then resize back to smallest size to reload tab component
import {Component, bootstrap, DynamicComponentLoader, ElementRef, ComponentRef} from 'angular2/core'
import {UiTabs, UiPane} from './ui_tabs'
import {TabbedLayout} from './tabbed_layout'
import {ResizeSvc} from './resize_svc';
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div #location></div>
</div>
`,
providers: [ResizeSvc]
})
export class App implements OnInit{
private resizeSvc: ResizeSvc;
private _children:ComponentRef;
constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef, pResizeSvc:ResizeSvc) {
this.name = 'Angular2'
this.resizeSvc = pResizeSvc;
}
ngOnInit() {
console.log('initialized app.ts');
this.resizeSvc.layout$.subscribe(
value => this.setLayout(value)
);
}
setLayout(pSize:string) {
this.removeAll();
if(pSize === 'xs') {
console.log('loading layout ' + pSize);
//this._dcl.loadIntoLocation(TabbedLayout, this._e, 'location').then((ref) => {
this._dcl.loadNextToLocation(TabbedLayout, this._e).then((ref) => {
ref.instance._ref = ref;
this._children = ref;
});
} else {
}
}
removeAll() {
if(this._children != null) {
console.log('Disposing layout...');
this._children.dispose();
this._children = null;
}
}
}
Here is a picture of the DOM when initially loaded
And here is a picture of the DOM on the second load with missing tabs
The order of <script> imports matters. angular2-polyfills.js has to be after system-polyfills.js. Here is your plunker working
I just moved the import below to the top of the list.
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>