FixNBlog

To use a background image in Magento 2 PWA Studio, you can apply the image through CSS or inline styles. Here’s a step-by-step guide on how to call a background image in a Magento 2 PWA theme

Steps to Add an Image in Magento 2 PWA Studio

1. Create a static block in your Magento 2 admin panel and add the following HTML content:

<li><a href="#">Test Content</a></li>

2. Create an Images Folder

Under src/components/CmsBlock/, create a folder named images and add your image (e.g., text.png) inside it:

src/components/CmsBlock/images/text.png

3. Update Webpack Configuration

Open the webpack.config.js file and locate the line:

test: /\.(jpg|svg)$/,

Change it to:

test: /\.(gif|svg|jpg|png)$/,

This allows Webpack to process .png images, along with .gif and .jpg.

4. Modify CSS for List Items

Open the src/components/CmsBlock/cmsBlock.css file and add the following CSS code to style the list items with the background image:

li a {
    background: url("./images/text.png") no-repeat left center;
    padding-left: 20px; /* Adjust as needed for spacing */
    display: inline-block; /* Ensures the background is applied correctly */
}

Example Usage in a Component

import React from 'react';
import './cmsBlock.css';

const CmsBlock = () => {
    return (
        <div className="cms-block">
            <ul>
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 2</a></li>
                <li><a href="#">Test 3</a></li>
                <li><a href="#">Test 4</a></li>
            </ul>
        </div>
    );
};

export default CmsBlock;

Run Your Project: After making these changes, run your Magento 2 PWA Studio project

yarn watch