CODEWITHSUNDEEP
vue.js
WMonteiro
WMonteiro

Reputation: 107

How to put a link to assets/pdf in vuejs

Hello I just want to put a link to PDF file but it's impossible. There is a library in npm or by another way to do that in VUEJS

I checked this link but it doesn't work

VueJS 2: Local assets

// template

<img src="~assets/images/wtd.jpg">

// image folder

image folder

// error

error

SOLUTION

For images just use 

<img src="@/assets/images/image.jpg">

For pdf just put your file in static folder and use this link. In my case I use 

<a href="../../static/mypdf.pdf">

Upvotes: 1

Views: 8919

Answers (3)

undefined
undefined

Reputation: 191

If you used vue-cli to create the project. The default image type of 'png|jpe?g|gif|webp' is default supported In template you can use 

<img src="~assets/images/demo.png"/>

In script you can use

const demo = require("@/assets/images/demo.png") // @ is a alias in webpack config

or:

import demo from "@/assets/images/demo.png")

For the .pdf file, there is no default loader for this type file. You need config a loader like url-loader for this: https://cli.vuejs.org/config/#configurewebpack

Upvotes: 0

Varit J Patel
Varit J Patel

Reputation: 3520

If you're using the project created by vue-cli, then below syntax will work e.g

<img src="@/assets/images/{{imageName}}.png"/>

Hope this helps

Upvotes: 0

Slim
Slim

Reputation: 1276

With webpack, you can bundle assets with CopyWebpackPlugin. Have a look at this webpack.config.js, it uses assets. https://github.com/BlueForestTrees/web/blob/master/webpack.config.js

Inside plugins section:

new CopyWebpackPlugin([{from: './img', to: 'img'}]),

Upvotes: 0

Related Questions