如何修复“不允许加载本地资源”Vue.js答案

【问题标题】：How to fix the "Not allowed to load local resource" Vue.js如何修复“不允许加载本地资源”Vue.js
【发布时间】：2020-12-27 13:20:48
【问题描述】：

我尝试使用 localhost 将一些图标和徽标加载到我的站点中，检测到文件但未加载并显示“不允许加载本地资源”，我还尝试使用“npm install -g http”运行该应用程序-server”在终端，但我有另一个错误：“加载资源失败：服务器响应状态为 404（未找到）@build.js:1”

【问题讨论】：

你是如何加载这个文件的？
使用<img src:"/*path*/">
只是为了确定这是一个错字，您的意思是说您使用的是<img src="/*path*/"> 对吗？
不完全是。我创建了一些数据作为对象，其中包括文本、链接和路径，这就是我使用它们的方式：<template> <footer id="main-footer"> <div id="social-media"> <header>Join us on social media</header> <ul> <li v-for="el in elements" :key="el"> <a :href="el.href"> <img :src="el.src" :alt="el.alt"> </a> </li> </ul> </div> </footer> </template> *elements 是我的数据，一个包含对象的数组，包括“src”、“href”和“alt”
好的，很好。如果我没记错的话，我相信如果要循环渲染图像，则需要使用公共路径。您是在公共路径还是资产文件夹中使用图像？

【解决方案1】：

加载图像有两种常用选项。

通过公用文件夹。例如<img src='/image/myImageName.png'>

注意：通过指定根目录/vue 被定向到公用文件夹

或通过资产文件夹。例如<img src='@/assets/images/myImageName.png'>

注意：通过提供@ 符号，vue 被定向到 src 目录

【讨论】：