如何在Vue.js中放置指向资产/ PDF的链接

Question

您好，我只想添加指向PDF文件的链接，但这是不可能的。在npm中有一个库，或者在VUEJS中有另一种库来实现

我检查了此链接，但它不起作用

  

VueJS 2: Local assets

//模板

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

//图片文件夹

//错误

解决方案

对于图像，只需使用

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

对于pdf文件，只需将文件放在静态文件夹中，然后使用此链接即可。就我而言，我使用

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

Answer 1

如果您正在使用由vue-cli创建的项目，则以下语法将起作用 例如

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

希望这会有所帮助

Answer 2

使用webpack，您可以将资产与CopyWebpackPlugin捆绑在一起。 看看这个webpack.config.js，它使用资产。 https://github.com/BlueForestTrees/web/blob/master/webpack.config.js

内部插件部分：

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

Answer 3

如果您使用vue-cli创建项目。默认支持'png | jpe？g | gif | webp'的默认图像类型。 在模板中，您可以使用

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

您可以在脚本中使用

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

或：

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

对于.pdf文件，此类型文件没有默认加载程序。您需要为此配置url-loader之类的加载器：https://cli.vuejs.org/config/#configurewebpack