Answers.Body: <p>The documentation was not very clear</p>
  
  <p><code>{{ craft.app.assetManager.publishedUrl('@poptin/poptin/resources/img/poptinlogo.png', true) }}</code></p>
  
  <p>This is how it is will publish that file to the public path for use.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-08T08:00:29.617Z
Answers.LastActivityDate: 2020-06-08T08:00:29.617Z
Answers.UserDisplayName: Rohan
Body: <p>So I am trying to build a simple plugin for Craft CMS and I am wish to use my assets in the twig template like css, js, images etc.</p>
  
  <p>From what I have read and understood from <a href="https://docs.craftcms.com/v3/extend/asset-bundles.html#registering-the-asset-bundle" rel="nofollow noreferrer">Asset Bundles</a>, I have created and registered my asset bundle and I am using it in the template now.</p>
  
  <p><code>&lt;img src="{{ alias('@poptin/poptin/resources/img/poptinlogo.png') }}"/&gt;</code></p>
  
  <p>This is one of the <code>img</code> tags in the template and it translates to:</p>
  
  <p><code>&lt;img src="/Users/rohan0793/Code/craftcms/vendor/poptin/poptin/src/resources/img/poptinlogo.png"&gt;</code></p>
  
  <p>Which is perfect in terms of path, since that is where the image lives. And yet I see an image not found icon in my browser window like so:</p>
  
  <p><a href="https://i.sstatic.net/WNzzt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WNzzt.png" alt="image"></a></p>
  
  <p>I am not sure what I am missing or doing wrong here. Any ideas anyone?</p>
  
  <p><strong>Additional details</strong></p>
  
  <p>PoptinBundle.php</p>
  
  <p>
  
  <p>use craft\web\AssetBundle;
  use craft\web\assets\cp\CpAsset;</p>
  
  <pre><code>class PoptinBundle extends AssetBundle
  {
      public function init()
      {
          // define the path where your publishable resources live
          $this-&gt;sourcePath = '@poptin/poptin/resources';
  
          // define the dependencies
          $this-&gt;depends = [
              CpAsset::class,
          ];
  
          // define the relative path to CSS/JS files that should be registered with the page
          // when this asset bundle is registered
          $this-&gt;js = [
              'script.js',
          ];
  
          $this-&gt;css = [
              'styles.css',
          ];
  
          parent::init();
      }
  }
  </code></pre>
  
  <p>The main plugin file Poptin.php</p>
  
  <pre><code>&lt;?php
  /**
   * poptin plugin for Craft CMS 3.x
   *
   * Create advanced website popups and forms, and improve your website's conversion rate within a few minutes.
   *
   * @link      poptin.com
   * @copyright Copyright (c) 2020 Poptin
   */
  
  namespace poptin\poptin;
  
  
  use Craft;
  use craft\base\Plugin;
  use craft\services\Plugins;
  use craft\events\PluginEvent;
  use craft\web\UrlManager;
  use craft\events\RegisterUrlRulesEvent;
  
  use yii\base\Event;
  
  /**
   * Craft plugins are very much like little applications in and of themselves. We’ve made
   * it as simple as we can, but the training wheels are off. A little prior knowledge is
   * going to be required to write a plugin.
   *
   * For the purposes of the plugin docs, we’re going to assume that you know PHP and SQL,
   * as well as some semi-advanced concepts like object-oriented programming and PHP namespaces.
   *
   * https://docs.craftcms.com/v3/extend/
   *
   * @author    Poptin
   * @package   Poptin
   * @since     1.0.0
   *
   */
  class Poptin extends Plugin
  {
      // Static Properties
      // =========================================================================
  
      /**
       * Static property that is an instance of this plugin class so that it can be accessed via
       * Poptin::$plugin
       *
       * @var Poptin
       */
      public static $plugin;
  
      // Public Properties
      // =========================================================================
  
      /**
       * To execute your plugin’s migrations, you’ll need to increase its schema version.
       *
       * @var string
       */
      public $schemaVersion = '1.0.0';
  
      /**
       * Set to `true` if the plugin should have a settings view in the control panel.
       *
       * @var bool
       */
      public $hasCpSettings = false;
  
      /**
       * Set to `true` if the plugin should have its own section (main nav item) in the control panel.
       *
       * @var bool
       */
      public $hasCpSection = true;
  
      // Public Methods
      // =========================================================================
  
      /**
       * Set our $plugin static property to this class so that it can be accessed via
       * Poptin::$plugin
       *
       * Called after the plugin class is instantiated; do any one-time initialization
       * here such as hooks and events.
       *
       * If you have a '/vendor/autoload.php' file, it will be loaded for you automatically;
       * you do not need to load it in your init() method.
       *
       */
      public function init()
      {
          parent::init();
          self::$plugin = $this;
  
          // Register our site routes
          Event::on(
              UrlManager::class,
              UrlManager::EVENT_REGISTER_SITE_URL_RULES,
              function (RegisterUrlRulesEvent $event) {
                  $event-&gt;rules['siteActionTrigger1'] = 'poptin/default';
              }
          );
  
          // Register our CP routes
          Event::on(
              UrlManager::class,
              UrlManager::EVENT_REGISTER_CP_URL_RULES,
              function (RegisterUrlRulesEvent $event) {
                  $event-&gt;rules['cpActionTrigger1'] = 'poptin/default/do-something';
              }
          );
  
          // Do something after we're installed
          Event::on(
              Plugins::class,
              Plugins::EVENT_AFTER_INSTALL_PLUGIN,
              function (PluginEvent $event) {
                  if ($event-&gt;plugin === $this) {
                      // We were just installed
                  }
              }
          );
  
  /**
   * Logging in Craft involves using one of the following methods:
   *
   * Craft::trace(): record a message to trace how a piece of code runs. This is mainly for development use.
   * Craft::info(): record a message that conveys some useful information.
   * Craft::warning(): record a warning message that indicates something unexpected has happened.
   * Craft::error(): record a fatal error that should be investigated as soon as possible.
   *
   * Unless `devMode` is on, only Craft::warning() &amp; Craft::error() will log to `craft/storage/logs/web.log`
   *
   * It's recommended that you pass in the magic constant `__METHOD__` as the second parameter, which sets
   * the category to the method (prefixed with the fully qualified class name) where the constant appears.
   *
   * To enable the Yii debug toolbar, go to your user account in the AdminCP and check the
   * [] Show the debug toolbar on the front end &amp; [] Show the debug toolbar on the Control Panel
   *
   * http://www.yiiframework.com/doc-2.0/guide-runtime-logging.html
   */
          Craft::info(
              Craft::t(
                  'poptin',
                  '{name} plugin loaded',
                  ['name' =&gt; $this-&gt;name]
              ),
              __METHOD__
          );
      }
  
      public function getCpNavItem()
      {
          $item = parent::getCpNavItem();
          // $item['badgeCount'] = 5;
          $item['icon'] = '@poptin/poptin/icon.svg';
          // $item['subnav'] = [
          //     'foo' =&gt; ['label' =&gt; 'Foo', 'url' =&gt; 'plugin-handle/foo'],
          //     'bar' =&gt; ['label' =&gt; 'Bar', 'url' =&gt; 'plugin-handle/bar'],
          //     'baz' =&gt; ['label' =&gt; 'Baz', 'url' =&gt; 'plugin-handle/baz'],
          // ];
          return $item;
      }
  
      // Protected Methods
      // =========================================================================
  
  }
  </code></pre>
  
  <p>This is how I have registered the bundle in my twig file:</p>
  
  <p><code>{% do view.registerAssetBundle("poptin\\poptin\\PoptinBundle") %}</code></p>
  
  <hr>
  
  <p>Edit:</p>
  
  <p>In one of the places in the asset bundle docs, it says "If you have a one-off file that you need to get the published URL for, but it doesn’t need to be registered as a CSS or JS file on the current page, you can use craft\web\AssetManager::getPublishedUrl()"</p>
  
  <p><code>$url = \Craft::$app-&gt;assetManager-&gt;getPublishedUrl('@ns/prefix/path/to/file.svg', true);</code></p>
  
  <p>But how do I use this code in my twig template?</p>
  
Tags: <plugin-development><templating><craft3><php>
Title: Images not showing even after bundling them with asset bundle
ThreadText: # Images not showing even after bundling them with asset bundle
  
  (Asked by: username_0 on 2020-06-08)
  
  So I am trying to build a simple plugin for Craft CMS and I am wish to use my assets in the twig template like css, js, images etc.
  
  From what I have read and understood from [Asset Bundles](https://docs.craftcms.com/v3/extend/asset-bundles.html#registering-the-asset-bundle), I have created and registered my asset bundle and I am using it in the template now.
  
  `<img src="{{ alias('@poptin/poptin/resources/img/poptinlogo.png') }}"/>`
  
  This is one of the `img` tags in the template and it translates to:
  
  `<img src="/Users/rohan0793/Code/craftcms/vendor/poptin/poptin/src/resources/img/poptinlogo.png">`
  
  Which is perfect in terms of path, since that is where the image lives. And yet I see an image not found icon in my browser window like so:
  
  [![image](https://i.sstatic.net/WNzzt.png)](https://i.sstatic.net/WNzzt.png)
  
  I am not sure what I am missing or doing wrong here. Any ideas anyone?
  
  **Additional details**
  
  PoptinBundle.php
  
  use craft\web\AssetBundle;
  use craft\web\assets\cp\CpAsset;
  
  ```
  class PoptinBundle extends AssetBundle
  {
      public function init()
      {
          // define the path where your publishable resources live
          $this->sourcePath = '@poptin/poptin/resources';
  
          // define the dependencies
          $this->depends = [
              CpAsset::class,
          ];
  
          // define the relative path to CSS/JS files that should be registered with the page
          // when this asset bundle is registered
          $this->js = [
              'script.js',
          ];
  
          $this->css = [
              'styles.css',
          ];
  
          parent::init();
      }
  }
  
  ```
  
  The main plugin file Poptin.php
  
  ```
  <?php
  /**
   * poptin plugin for Craft CMS 3.x
   *
   * Create advanced website popups and forms, and improve your website's conversion rate within a few minutes.
   *
   * @link      poptin.com
   * @copyright Copyright (c) 2020 Poptin
   */
  
  namespace poptin\poptin;
  
  use Craft;
  use craft\base\Plugin;
  use craft\services\Plugins;
  use craft\events\PluginEvent;
  use craft\web\UrlManager;
  use craft\events\RegisterUrlRulesEvent;
  
  use yii\base\Event;
  
  /**
   * Craft plugins are very much like little applications in and of themselves. We’ve made
   * it as simple as we can, but the training wheels are off. A little prior knowledge is
   * going to be required to write a plugin.
   *
   * For the purposes of the plugin docs, we’re going to assume that you know PHP and SQL,
   * as well as some semi-advanced concepts like object-oriented programming and PHP namespaces.
   *
   * https://docs.craftcms.com/v3/extend/
   *
   * @author    Poptin
   * @package   Poptin
   * @since     1.0.0
   *
   */
  class Poptin extends Plugin
  {
      // Static Properties
      // =========================================================================
  
      /**
       * Static property that is an instance of this plugin class so that it can be accessed via
       * Poptin::$plugin
       *
       * @var Poptin
       */
      public static $plugin;
  
      // Public Properties
      // =========================================================================
  
      /**
       * To execute your plugin’s migrations, you’ll need to increase its schema version.
       *
       * @var string
       */
      public $schemaVersion = '1.0.0';
  
      /**
       * Set to `true` if the plugin should have a settings view in the control panel.
       *
       * @var bool
       */
      public $hasCpSettings = false;
  
      /**
       * Set to `true` if the plugin should have its own section (main nav item) in the control panel.
       *
       * @var bool
       */
      public $hasCpSection = true;
  
      // Public Methods
      // =========================================================================
  
      /**
       * Set our $plugin static property to this class so that it can be accessed via
       * Poptin::$plugin
       *
       * Called after the plugin class is instantiated; do any one-time initialization
       * here such as hooks and events.
       *
       * If you have a '/vendor/autoload.php' file, it will be loaded for you automatically;
       * you do not need to load it in your init() method.
       *
       */
      public function init()
      {
          parent::init();
          self::$plugin = $this;
  
          // Register our site routes
          Event::on(
              UrlManager::class,
              UrlManager::EVENT_REGISTER_SITE_URL_RULES,
              function (RegisterUrlRulesEvent $event) {
                  $event->rules['siteActionTrigger1'] = 'poptin/default';
              }
          );
  
          // Register our CP routes
          Event::on(
              UrlManager::class,
              UrlManager::EVENT_REGISTER_CP_URL_RULES,
              function (RegisterUrlRulesEvent $event) {
                  $event->rules['cpActionTrigger1'] = 'poptin/default/do-something';
              }
          );
  
          // Do something after we're installed
          Event::on(
              Plugins::class,
              Plugins::EVENT_AFTER_INSTALL_PLUGIN,
              function (PluginEvent $event) {
                  if ($event->plugin === $this) {
                      // We were just installed
                  }
              }
          );
  
  /**
   * Logging in Craft involves using one of the following methods:
   *
   * Craft::trace(): record a message to trace how a piece of code runs. This is mainly for development use.
   * Craft::info(): record a message that conveys some useful information.
   * Craft::warning(): record a warning message that indicates something unexpected has happened.
   * Craft::error(): record a fatal error that should be investigated as soon as possible.
   *
   * Unless `devMode` is on, only Craft::warning() & Craft::error() will log to `craft/storage/logs/web.log`
   *
   * It's recommended that you pass in the magic constant `__METHOD__` as the second parameter, which sets
   * the category to the method (prefixed with the fully qualified class name) where the constant appears.
   *
   * To enable the Yii debug toolbar, go to your user account in the AdminCP and check the
   * [] Show the debug toolbar on the front end & [] Show the debug toolbar on the Control Panel
   *
   * http://www.yiiframework.com/doc-2.0/guide-runtime-logging.html
   */
          Craft::info(
              Craft::t(
                  'poptin',
                  '{name} plugin loaded',
                  ['name' => $this->name]
              ),
              __METHOD__
          );
      }
  
      public function getCpNavItem()
      {
          $item = parent::getCpNavItem();
          // $item['badgeCount'] = 5;
          $item['icon'] = '@poptin/poptin/icon.svg';
          // $item['subnav'] = [
          //     'foo' => ['label' => 'Foo', 'url' => 'plugin-handle/foo'],
          //     'bar' => ['label' => 'Bar', 'url' => 'plugin-handle/bar'],
          //     'baz' => ['label' => 'Baz', 'url' => 'plugin-handle/baz'],
          // ];
          return $item;
      }
  
      // Protected Methods
      // =========================================================================
  
  }
  
  ```
  
  This is how I have registered the bundle in my twig file:
  
  `{% do view.registerAssetBundle("poptin\\poptin\\PoptinBundle") %}`
  
  ---
  
  Edit:
  
  In one of the places in the asset bundle docs, it says "If you have a one-off file that you need to get the published URL for, but it doesn’t need to be registered as a CSS or JS file on the current page, you can use craft\web\AssetManager::getPublishedUrl()"
  
  `$url = \Craft::$app->assetManager->getPublishedUrl('@ns/prefix/path/to/file.svg', true);`
  
  But how do I use this code in my twig template?
  
  **Tags:** plugin-development, templating, craft3, php
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-06-08. Score: 1 | Accepted answer
  
  The documentation was not very clear
  
  `{{ craft.app.assetManager.publishedUrl('@poptin/poptin/resources/img/poptinlogo.png', true) }}`
  
  This is how it is will publish that file to the public path for use.
  
  
  ---
  
  