如何将本地文件夹图像（资产）包含到 vue App答案

【问题标题】：How to include local folder images ( assets ) to vue App如何将本地文件夹图像（资产）包含到 vue App
【发布时间】：2020-06-09 06:36:12
【问题描述】：

我正在尝试在其中一个 Vue 应用程序中添加图像，我正在使用 "./assets/logo.png" Vue 应用的 url 是http://localhost:8080/#/

错误的原因可能是什么？

感谢回答

【问题讨论】：

【解决方案1】：

为此，您需要需要图像源，在开头添加一个额外的.，这样您就可以离开components 文件夹，并在其末尾包含.png：

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

require 与 webpack 不知道您在没有它时所指的位置有关。

【讨论】：

如果我想在这里添加怎么办 - style="background-image: url(./assets/hero-bg.5bbf972f.jpg);">
取决于您使用它的位置、CSS/Vue 等，以及文件与图像相关的位置
我已经像这样添加了
& 它不工作（出现找不到内容）你能指导一下这里缺少什么吗？
你可以绑定style并使用字符串插值：:style="`background-image: url(${require('../assets/logo.png')})`"。

【解决方案2】：

将"./assets/logo.png" 更改为require('../assets/logo.png')

这告诉 Webpack 在该位置搜索该图像，并在渲染时将引用替换为实际值。

【讨论】：