Unable to load images with a vanilla setup

[skattabrain]

Not sure what I'm doing wrong, I'm still in pretty vanilla install of Vue CLI and this plugin, but I'm unable to load images.

The main (default) Vue app is able to serve the sample App with the Vue logo, but I'm unable to load the same asset in a story when running my storybook server.

I have no custom vue.config and here's my /config/storybook/main.js...

  stories: ['../../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    {
      name: '@storybook/addon-docs',
      options: {
        babelOptions: {
          presets: [
            [
              '@vue/cli-plugin-babel/preset',
              {
                jsx: false,
              },
            ],
          ],
        },
      },
    },
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-notes',
    '@storybook/addon-storysource',
  ],
};

my package.json...

  "name": "vueclidemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook:build": "vue-cli-service storybook:build -c config/storybook",
    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "tailwindcss": "^1.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": ">=5.3.0",
    "@storybook/addon-docs": ">=5.3.0",
    "@storybook/addon-knobs": ">=5.3.0",
    "@storybook/addon-links": ">=5.3.0",
    "@storybook/addon-notes": ">=5.3.0",
    "@storybook/addon-storysource": "^5.3.18",
    "@storybook/vue": ">=5.3.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-vue": "^6.1.2",
    "vue-cli-plugin-storybook": "~1.2.2",
    "vue-cli-plugin-svg": "~0.1.3",
    "vue-template-compiler": "^2.6.11"
  }
}

here's a sample story...

import ListingCard from '../components/ListingCard.vue';

const templateDecorator = () => ({
  template: `
<div class="h-screen w-screen bg-gray-300 flex flex-col items-center justify-center">
  <div class="w-1/4">
      <story />
  </div>
  <div class="mt-6">
    <img src="@/assets/logo.png">
  </div>
</div>
    `,
});

export default {
  component: ListingCard,
  decorators: [
    templateDecorator,
  ],
  title: 'Components/Listing Card',
};

export const withText = () => ({
  components: { ListingCard },
  data: () => ({}),
  template: '<listing-card title="My Listing" />',
});

[skattabrain]

By the way, I appreciate this project! Having done Vue/Storybook the hard way the past couple years at work, it's nice to just add a package and get productive.

[skattabrain]

Sorry, my bad! I couldn't use images in my templateDecorator! In the component it is fine.

[pksunkara]

By the way, I appreciate this project! Having done Vue/Storybook the hard way the past couple years at work, it's nice to just add a package and get productive.

Thanks 😊