How Do I Display Product Images In Shopware 6 Administration

Question

I am working on a Shopware 6 Administrative plugin but displaying product images has been a big headache. I went through shopware repositories of 'product_media', 'media', and generally all folder repositories related to media.

I have not been able to decipher how image linking works since I can not get hold of the exact folder names.

How then do I go about this. Note: I have been able to get correct image names and relevant image data like id, folder id etc.

Below is my module/component idex.js file codes

import template from './images-page.html.twig';

const { Component, Context } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('images', {

    template,

    inject: ['repositoryFactory', 'mediaService', 'acl'],

    metaInfo() {
        return {
            title: 'images'
        };
    },


    computed: {

        /**productMediaRepository() {
            return this.repositoryFactory.create(this.product.media.entity);
        },*/

        productRepository() {
            return this.repositoryFactory.create('product');
        },

        mediaFolderRepository() {
            return this.repositoryFactory.create('media_folder');
        },
        mediaRepository() {
            return this.repositoryFactory.create('media');
        },
        rootFolder() {
            const root = this.mediaFolderRepository.create(Context.api);
            root.name = this.$tc('sw-media.index.rootFolderName');
            root.id = null;
            return root;
        },

        logRep(){
            console.log(this.productRepository);
           // console.log(this.mediaFolderRepository);
           // console.log(this.mediaRepository);
           // console.log(this.rootFolder);
        }

    },


    methods: {

        logProducts(){
                    
            const criteria = new Criteria();

            this.productRepository
                .search(criteria, Shopware.Context.api)
                .then(result => {
                 console.log(result[0]);
                });
        },

        logMediaFolders(){
                    
            const criteria = new Criteria();

            this.mediaFolderRepository
                .search(criteria, Shopware.Context.api)
                .then(result => {
                 console.log(result);
                });
        }





    },

    created(){

        this.logMediaFolders();
    }



});

here's the twig template (nothing really here)

<sw-card title="Watermark">
    <img src="" alt="Product Image" />

</sw-card>

Answer 1

The media elements of the products are associations that are not loaded automatically, but you can configure the criteria, so that those associations will be loaded directly when you fetch the products. Refer to the official docs for detailed infos.

In you case that means to load the cover image / or all product images, you would have to adjust the criteria you use for fetching the products the following way

        logProducts(){    
            const criteria = new Criteria();
            criteria.addAssociation('cover.media');
            criteria.addAssociation('media.media');


            this.productRepository
                .search(criteria, Shopware.Context.api)
                .then(result => {
                 console.log(result[0]);
                });
        },

Then to link to the cover image you can use:

<sw-card title="Watermark">
    <img src="product.cover.media.url" alt="Product Image" />

</sw-card>

You find all the media elements of the product as an array under product.media and can also use product.media[0].media.url to link to those images.