How To Use Local Static Images In Svelte?

Last Updated : 16 Aug, 2024

Static images are stored locally within your project and can be accessed directly through the file path. In Svelte, you can use these static images in your components by importing them directly or referencing their paths within the public directory.

In this article, we will explore two different approaches to using local static images in Svelte.

Steps To Use Local Static Images In Svelte

Step 1: Install Node.js

Make sure Node.js is installed on your machine. You can download it from nodejs.org.

Step 2: Install Svelte

Open your terminal and run the following command to set up a new Svelte project:

npx degit sveltejs/template svelte-app

Step 3: Navigate to Your Project Directory

Change to the newly created project directory:

cd svelte-app

Step 4: Install Dependencies

Install the required npm packages:

npm install

Project Structure

Dependencies

"devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
},
"dependencies": {
    "sirv-cli": "^2.0.0"
}

Approach 1: Using Static Asset Paths

In this approach, we are using static asset paths to reference images stored in the public directory of the Svelte project. By directly assigning the image paths to the src attribute, the images can be dynamically swapped when a button is clicked, allowing for interactive content within the application.

Example: The below example uses Static Asset Paths to Load Static Images in Svelte.

JavaScript

<!-- App.svelte -->
<script>
    let currentImage = "/images/image1.png";
    let imageName = "Image 1";

    function changeImage() {
        if (currentImage === "/images/image1.png") {
            currentImage = "/images/image2.jpg";
            imageName = "Image 2";
        } else {
             currentImage = "/images/image1.png";
             imageName = "Image 1";
        }
  }
</script>

<h1>GeeksforGeeks</h1>
<h3>Approach 1: Using Static Asset Paths</h3>

<div class="container">
    <p>Current Image: {imageName}</p>
    <img src={currentImage} alt="Dynamic Image" />
    <button on:click={changeImage}>Change Image</button>
</div>

<style>
  h1 {
      color: green;
      text-align: center;
  }

  h3 {
      text-align: center;
  }

  .container {
      text-align: center;
      margin-top: 20px;
  }

  img {
      max-width: 300px;
      height: auto;
      display: block;
      margin: 0 auto;
  }

  button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
  }  
</style>

Output:

How To Use Local Static Images In Svelte

Approach 2: Using src Binding

In this approach, we are using the src attribute binding in the <img> tag to dynamically display images based on the user's selection from a dropdown menu. The src is bound to the selectedImage variable, which updates whenever the user selects a different image, allowing for interactive image switching within the application.

Example: The below example uses src Binding to use local static images in Svelte.

JavaScript

<!-- App.svelte -->
<script>
    const images = [
        { name: "Image 1", path: "/images/image1.png" },
        { name: "Image 2", path: "/images/image2.jpg" },
    ];

    let selectedImage = images[0].path;
    let imageName = images[0].name;

    function updateImage(event) {
        const selectedOption = event.target.value;
        const image = images.find((img) => img.name === selectedOption);
        selectedImage = image.path;
        imageName = image.name;
  }
</script>

<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using `src` Binding</h3>

<div class="container">
    <p>Selected Image: {imageName}</p>
    <img src={selectedImage} alt="Dynamic Image" />

    <select on:change={updateImage}>
        {#each images as image}
        <option>{image.name}</option>
        {/each}
    </select>
</div>

<style>
  h1 {
      color: green;
      text-align: center;
  }

  h3 {
      text-align: center;
  }

  .container {
      text-align: center;
      margin-top: 20px;
  }

  img {
      max-width: 300px;
      height: auto;
      display: block;
      margin: 0 auto;
  }

  select {
      margin-top: 20px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
  }
</style>

Output

How to Use Local Docker Images With Minikube?

gauravggeeksforgeeks

Improve

Article Tags :