I'm unable to display the static resource Images in HTML by using LWC. Below is the file. Please guide me to fix this issue.
HTML
<lightning-card> <img src={profilePic}/> </lightning-card>
JS File
import { LightningElement,track } from 'lwc';
import staticResourceImage from '#salesforce/resourceUrl/Static_Images';
export default class MyComponent extends LightningElement {
profilePic = staticResourceImage+'/avatar.png' ;
}
Static Resource:
Static Resource Created
Static Resource Images
Image Error
Thanks in Advance,
remove /avatar.png update code as
profilePic = staticResourceImage;
Related
I tried to build a LWC component to view data, but the data was not showing on UI. i can't get what was wrong with my code.
Html:
<template>
<lightning-card title="LDS Lab" icon-name="custom:custom54">
<div class="slds-m-around_small">
<lightning-record-form
record-id={recordId}
object-api-name={objectApiName}
layout-type="full"
mode="view"
columns="2"
>
</lightning-record-form>
</div>
</lightning-card>
</template>
JavaScript:
import { LightningElement,api } from 'lwc';
export default class LdsRecord extends LightningElement {
#api recordId;
#api objectApiName;
}
Meta File:
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
First thing you need to check here is if you are getting recordId before the LDS form get loads, if it is not having blank value while loading then try below.
Using getter setters to set the recordId attribute
Add a console log in getter if the _recordId is having value
If not then use a boolean to avoid lightning-record-form load,
if:true=attribute
And load it when you have recordId in getter.
load = false;
#api set recordId(value) {
console.log(value);
this._recordId = value;
load = true
}
get recordId() {
console.log(this._recordId);
return this._recordId;
}
Please check this post also: https://salesforce.stackexchange.com/questions/344045/recordid-is-undefined-in-lwc-quick-action-component
import { File } from '#ionic-native/file/ngx';
I can’t use the class File from cordova-plugin-file in my application cause there is another interface from JavaScript also called File.
This name conflict impedes my app to access the cordova-plugin-file functions I want.
File from JavaScript has this description : “
interface File
Provides information about files and allows JavaScript in a web page to access their content.”.
File from cordova-plugin-file should (alias) const File: FileOriginal
import File
'File' is declared but its value is never read
Here is my code :
import { File } from '#ionic-native/file/ngx';
export class Tab1Page {
constructor(public file: File) {}
...
}
Just so that it helps someone. Workaround was to declare cordova-plugin-file outside constructor.
import { File as cordova_file } from '#ionic-native/file/ngx';
private file: typeof cordova_file
constructor(
So i have a visual studio project created with react.js.
I am trying to link to an image dynamically, but failing. This is the code I am trying:
At the top im setting a variable for the first part of the path:
this.LogoPath = '../images/'
And then im dynamically grabbing the name of the image from an api call.
this.setState({ imageNamePath: this.state.location.imageName })
And then im concatinating them:
{`${this.LogoPath}${this.state.location.imageName}`}
In the console, im getting:
img src='../images/the-images-name-here.png'
So it seems to be working, but it is not. I get no errors, and I have broken images. My best guess is that react is changing the images to something like:
image-name-here.6a131799.png
Surely someone has run across this before, but my google search pulled up little help.
So how do i get the images to show?
Webpack is a smart tool. One of it's strength is the trash code/files elimination from the bundle.
That means that if a file is not imported using import myFile from '../myPath/myFile.jpg'; or require('../myPath/myFile.jpg');` it won't be a part of the final bundle.
In your case you're not importing the file. You're creating a string variable instead which means nothing to webpack.
There are different options that could work in your case:
Option 1: Pre-import all images and map them in an object:
import React, {Component} from 'react';
import image1 from '../assets/image1.png';
import image2 from '../assets/image2.png';
import image3 from '../assets/image3.png';
const imageTypes = {
image1,
image2,
image3,
}
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
imageType: 'image1'
}
}
render() {
return (
<img src={imageTypes[this.state.imageType]} />
)
}
}
Option 2: Not recommended - Use require to dynamically import files (webpack configurations might be needed in order to include all possible required images in the production bundle):
class MyComponent {
constructor(props) {
super(props);
this.state = {
image: 'file1.png'
}
}
render() {
return (
<img src={require(`./assets/${this.state.image}`)} />
)
}
}
Option 3: Send the image blob (in base64) from the API.
I suggest you to use the Option 1 or Option 3, based on your requirements, such as: how often will be images be changed/added/removed. It's not normal to import files dynamically from ReactJS bundle and you might end up having a non-existing image in your project requested by the data coming from an external source.
For Option 2 you also might have some problems configuring the webpack in order to include in the bundle all the images that you'll probably need to render, even though they are not imported (hardcoded) somewhere in the JS files. Keep in mind that the React Application in production ends up being a collection of static files. You'll need to treat them as follows.
In AngularJS 1 we simply add ng-app at top of the HTML tag and bind services to change metadata on the fly.
But in Angular2 the quickstart app in official site made index.html completely static (css, meta, ...), only left app tag to bind with bootstrap()
Now how we can do when we want to build many panel with different style and js plugins, meta keyword...
update
There is now also the Meta service that allows to modify meta tags
https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html
original
There is currently no support built in in Angular. There is an open issue though for (almost) full support of meta tags and other stuff in <head>.
Currently there is only built-in support for the <title> tag using the Title service.
constructor(private title:Title) {
}
updateTitle(title:string) {
this.title.setTitle(title);
console.log(this.title.getTitle());
}
I have just released #ngx-meta/core plugin, using that you can add meta information inside the data property of routes:
const routes = [
{
path : 'home',
component : HomeComponent,
data : {
meta : {
title : 'Sweet home',
description : 'Home, home sweet home... and what?',
}
}
},
{
path : 'duck',
component : DuckComponent,
data : {
meta : {
title : 'Rubber duckie',
description : 'Have you seen my rubber duckie?',
}
}
},
{
path : 'toothpaste',
component : ToothpasteComponent,
data : {
meta : {
title : 'Toothpaste',
override : true, // prevents appending/prepending the application name to the title attribute
description : 'Eating toothpaste is considered to be too healthy!',
}
}
}
...
];
If you want to override values supplied at the route configuration, it's possible to set meta information programmatically - just in the component class:
...
import { Component, OnInit } from '#angular/core';
import { MetaService } from '#ngx-meta/core';
...
#Component({
...
})
export class ItemComponent implements OnInit {
...
constructor(private metaService: MetaService) { }
...
ngOnInit() {
this.item = //HTTP GET for "item" in the repository
this.metaService.setTitle(`Page for ${this.item.name}`);
this.metaService.setTag('og:image', this.product.imageUrl);
}
}
You can find detailed instructions at #ngx-meta/core github repository. Also, source files might be helpful to introduce a custom logic.
I'm using google app engine with JSF. i want to call a function when user press that button:
<p:commandButton value="Ajax Submit" action="#{todo.test}" />
and I put todo under src->package test123.
package test123;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
#ManagedBean(name="todo")
#SessionScoped
public class Todo {
public void test(ActionEvent event){
System.out.println("lol");
}
}
but when i press button, error occurs:
sth like this:
javax.el.MethodNotFoundException: /Template/default.xhtml #39,38 action="#{todo.test}": Method not found: test.Todo#7929b073.test()
am i wrong? or do i need to do some configurations ?
Thanks
Use actionListener="#{todo.test}" or try:
public void test()
{
System.out.println("lol");
}
See here for more details: Differences between action and actionListener