function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sweety001sweety001 

how to download png file in Lightning web component and make it downloadable dynamically

Suraj Tripathi 47Suraj Tripathi 47

Hello Geetha A 2
Please find the solution.
First you have to store the image in static resourse:-

staticResourceLWCExample.html
 

<template>
  <lightning-card title="Static Resource Example LWC" icon-name="custom:custom19">
      <div class="slds-m-around_medium">
          <img src={yin} download>
      </div>
      
    <div>
        <a href={url} onclick={handleClick} download="">Download</a>
    </div>

  </lightning-card>
</template>

staticResourceLWCExample.js
import { LightningElement } from 'lwc';
import My_Resource from '@salesforce/resourceUrl/yin';
import { NavigationMixin } from 'lightning/navigation';
export default class StaticResourceLWCExample extends NavigationMixin(LightningElement) {
    yin = My_Resource;
     url;

    

    handleClick(evt) {
       this.url="https://power-agility-6120-dev-ed.lightning.force.com/resource/1638705339000/yin";
    }
}
Enter the url of image (open image in new tab
staticResourceLWCExample.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Please mark it as the best answer so that other people can take reference from it. 
Thank You
sweety001sweety001
Hi @Suraj Tripathi 47,
My requirement is to prepare dynamic image (png) based on contact information which is available on LWC html.Let me know if you need more information on this
 
Priya Singh 118Priya Singh 118
Thanks a lot to the author for sharing valuable content with us.i am happy to share also - government jobs (https://vacancysquare.com/) & government scheme (https://vacancysquare.com/) site post.