How load image from current directory

Shopware 6 (English)
1

Plugin directory :

$PROJECTROOT
	- src
		-- Controller
		-- Resources
			-- app
			-- administration
			-- build
				--- webpack.config.js
			-- img
				--- shopwareimage.jpg
			-- js
			-- src
				--- folder-name
					---- page
						----- folder-name
							------- index.js
							------- file.html.twig
							------- filename.scss
							------- shopwareimage.jpg
					---- index.js
				--- main.js

Webpack.config.js

const { join, resolve } = require('path');

module.exports = () => {
    return {
    	output: {
    		publicPath:join(__dirname, '..', 'img')
    	},
        resolve: {
            alias: {
                '@slugify': resolve(
                    join(__dirname, '..', 'node_modules', 'slugify')
                )
            }
        }
    };
}

index.js

import { Component, Mixin } from 'src/core/shopware';
import template from './file.html.twig';
Component.register('component-name', {
	template,
	data() {
		return {
		    image:require("./shopwareimage.jpg")
		};
	},
});

file.html.twig

{% block name %}
	<sw-page class="oxy-hubspot-auth">
		<template>
			<img v-bind:src={{image}}>
		</template>
	</sw-page>
{% endblock %}

I want to display image that is in the img or folder-name
i tried to use require method but didn’t work
i have tried to set public path publicPath to webpack but it also didn’t work

How can i display image which is with in same directory of twig file ?

2

You need to put your assets into the public folder and the run bin/console assets:install.
After you did that you can easily link to your assets like this:

Also look at the documentation: Add custom assets - Shopware Developer