How to reference static assets within vue javascript

Question

I m looking for the right url to reference static assets  like images within Vue javascript   For example  I m creating a leaflet marker using a custom icon image  and I ve tried several urls  but they all return a 404  Not Found    Main vue   var icon   L icon       iconUrl     assets img png       iconSize       25  25       iconAnchor     12  12        I ve tried putting the images in the assets folder and the static folder with no luck   Do I have to tell vue to load those images somehow

User · Answer

A better solution would be

Adding some good practices and safity to @acdcjunior's answer, to use @ instead of ./

In JavaScript

require("@/assets/images/user-img-placeholder.png")

In JSX Template

<img src="@/assets/images/user-img-placeholder.png"/>

using @ points to the src directory.

using ~ points to the project root, which makes it easier to access the node_modules and other root level resources

User · Answer

Of course src    assets images x jpg works   but better way is  src   assets images x jpg

User · Answer

In order for Webpack to return the correct asset paths  you need to use require    relative path to file jpg    which will get processed by file-loader and returns the resolved URL   computed      iconUrl          return require    assets img png          The path could be     assets img png   etc   which depends on where your vue file is         See VueJS templates - Handling Static Assets

User · Answer

I m using typescript with vue  but this is how I went about it   lt template gt  lt div gt  lt img  src  MyImage    gt  lt  div gt  lt  template gt   lt script lang  ts  gt      import   Vue   from  vue-property-decorator       export default class MyPage extends Vue               MyImage       assets images myImage png              lt  script gt

User · Answer

Having a default structure of folders generated by Vue CLI such as src assets you can place your image there and refer this from HTML as follows  lt img src     src assets img logo png  gt  as well  works automatically without any changes on deployment too

User · Answer

this finally worked for me  image passed as prop   lt img  src  quot require        assets   image  svg   quot  gt

User · Answer

It works for me by using require syntax like this      eventSlick   slick       dots  true      slidesToShow  3      slidesToScroll  1      autoplay  false      autoplaySpeed  2000      arrows  true      draggable  false      prevArrow    lt button type  quot button quot  data-role  quot none quot  class  quot slick-prev quot  gt  lt img src  quot     require  quot   assets img icon Arrow Left svg quot     quot  gt  lt  button gt

User · Answer

In a Vue regular setup   assets is not served  The images become src  quot data image png base64 iVBORw0K   YII  quot  strings  instead   Using from within JavaScript  require   To get the images from JS code  use require     assets myImage png    The path must be relative  see below   So your code would be  var icon   L icon       iconUrl  require    assets img png         was iconUrl     assets img png       iconUrl  require    assets img png       use   as alternative  depending on the path                  Use relative path For example  say you have the following folder structure  - src    - assets      - myImage png    - components      - MyComponent vue  If you want to reference the image in MyComponent vue  the path sould be    assets myImage png  Here s a DEMO CODESANDBOX showing it in action

User · Answer

Right after oppening script tag just add import someImage from     assets someImage png  and use it for an icon url iconUrl  someImage

User · Answer

For anyone looking to refer images from template  You can refer images directly using      Example    lt img src    assets images home png   gt

User · Answer

What system are you using  Webpack  Vue-loader    I ll only brainstorming here      Because  png is not a JavaScript file  you will need to configure Webpack to use file-loader or url-loader to handle them  The project scaffolded with vue-cli has also configured this for you   You can take a look at webpack conf js in order to see if it s well configured like                     test      png jpe g gif svg                    loader   url-loader           options              limit  10000            name  utils assetsPath  img  name   hash 7   ext                              assets is for files that are handles by webpack during bundling - for that  they have to be referenced somewhere in your javascript code   Other assets can be put in  static  the content of this folder will be copied to  dist later as-is   I recommend you to try to change    iconUrl     assets img png   to   iconUrl     dist img png   You can read the official documentation here  https   vue-loader vuejs org en configurations asset-url html  Hope it helps to you

[javascript] How to reference static assets within vue javascript

A better solution would be

Examples related to javascript

Examples related to vue.js

Examples related to leaflet