0

I am trying to add an image , in one of the Vue app , i am using "./assets/logo.png" the url of Vue app is http://localhost:8080/#/

What can be the cause of the error ?

Answers Appreciated

  • 1
    Can you post a picture of your directory structure? Specifically where the image is stored in relation to the file you are referencing it. Additionally an image or copy of the error will help too – cam Jun 09 '20 at 06:39
  • Structure added , as image please take a look sir. –  Jun 09 '20 at 06:43
  • 1
    Can you show where the image is being used? i.e. the `` – Daniel_Knights Jun 09 '20 at 06:46
  • Please don't post images of code. See https://stackoverflow.com/help/how-to-ask – Phil Jun 09 '20 at 06:47
  • 1
    Does this answer your question? [How to import and use image in a Vue single file component?](https://stackoverflow.com/questions/45116796/how-to-import-and-use-image-in-a-vue-single-file-component) – Phil Jun 09 '20 at 06:48

2 Answers2

1

For this to work you need to require the image source, add an extra . at the start so you go out of the components folder, and include .png on the end of it:

{ ... image: require("../assets/logo.png") }

The require is something to do with webpack not knowing where you're referring to without it.

Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • What if i want to add here - style="background-image: url(./assets/hero-bg.5bbf972f.jpg);"> –  Jun 09 '20 at 07:47
  • Depends where you're using it, CSS/Vue etc., and where the file is located relevant to the image – Daniel_Knights Jun 09 '20 at 07:48
  • I've added like this
    & its not working (content not found appears) can you please guide what's missing here ?
     –  Jun 09 '20 at 07:49
  • 1
    You could bind `style` and use string interpolation: ```:style="`background-image: url(${require('../assets/logo.png')})`"```. – Daniel_Knights Jun 09 '20 at 07:57
0

Change "./assets/logo.png" to require('../assets/logo.png')

This tells Webpack to search for that image at that location and replace the reference with an actual value at render time.

cam
  • 3,179
  • 1
  • 12
  • 15
  • What if i want to add here - style="background-image: url(./assets/hero-bg.5bbf972f.jpg);"> –  Jun 09 '20 at 07:47