Adding assets - XMPieLab/uStore-NG GitHub Wiki

All assets of the application are placed in the src/assets folder. The assets folder contains font files and images. You can add more assets to the folder and access them from the application's components and pages.

Add a new asset

  1. In the code of the ContactUs.js page that we’ve previously created, let’s add the following code just before the closing tag:
     …
    </div>
        </div>
        <img src={require(`$assets/images/banner_image.png`)} className="map"/>
      </Layout>
    )
}

In order for Webpack to load the image correctly, the image source is added with a require function. Also, the given path is constructed using the assets alias name (see $assets notation in the path), which ensures the asset is accessible in all working, development and production environments. Read more about alias names for theme folders in Theme file structure section.

  1. For visibility, add the following style in the ContactUs.scss file:
.map {
  width: 1160px;
  height:450px;
  margin: 0 auto;
}

If you now check the ContactUs page in your browser, you will see that the image has been added to the page. The displayed image is banner_image.png, which comes with the theme, however you can place any other image in the assets folder and reference it in the src attribute.

Note: The logo image is part of the theme, but because it’s a common asset for both the React pages and the legacy login page, it is not recommended to change it during theme development. Instead, change the logo per store in the Theme Customization editor in the Backoffice. If you change the theme’s default logo, make sure to keep the original name and format - logo.png.

⚠️ **GitHub.com Fallback** ⚠️