Vue中的图像不显示答案

【问题标题】：Images in Vue not showing upVue中的图像不显示
【发布时间】：2019-03-02 21:11:34
【问题描述】：

我在 Vue CLI 项目中显示图像时遇到问题。

这就是我正在做的事情。这个 vue 文件访问一个 json 文件，其中包含对单个眼镜对象的一些引用，所有这些都有效。我在 json 文件中引用了我试图访问的图像。并且使用当前代码，我可以在浏览器中看到正确的图像引用，但它不会加载图像。是否与 webpack 或其他需要加载图像文件的加载器有关？

    <template>
  <div>
    <h1 id='callout'>Select Your Eyewear</h1> 
    <div id='item' v-for='item in items' :key=item.id>
      <img :src='`..${item.images.frontal}`' alt='eyeware' />
      <ul id='itemLIist'>     
        <li >
          {{ item.brand }}
        </li>
        <li>
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import items from "../assets/eyewear.json";

export default {
  name: "ItemList",
  data: function() {
    return {
      items: items.eyewear
    };
  }
};
</script>

<style scoped>
</style>

【问题讨论】：

我也有类似的情况。我将一个组件外部化为 html 和 typescript，无论 ../../../、../../、../ 或 ./ 或 @/ 或 ~@ 或 ~ 有效。现在认为它与 Webpack 相关，因此需要进行更多研究。
是的，我想是的，那是不久前的事了，我不认为我最终在 Vue 中得到了它。由于它是一个演示，我最终切换到创建反应应用程序。但是，如果我再转一圈并得到这个，我会更新帖子。
好吧，我的解决方法是这样做 - <img class="img-fluid" :src="require('@/assets/logo.png')" alt="CompanyName">

标签： vue.js

【解决方案1】：

我不知道这是否适合你。但就我而言，提供图像的完整路径对我有用。在您的屏幕截图参考中，从“../assets”开始，而不是尝试“src/assets”（不带点的完整路径）

为了简单起见，首先尝试将完整路径 src 硬编码为 image 标记，然后查看它是否有效。

如果这对你有用，请告诉我。 =)

【讨论】：

谢谢，虽然我已经尝试了动态渲染中的完整路径，但我还没有尝试对其进行硬编码以进行故障排除，我现在就尝试一下。
不，即使从源代码硬编码，它似乎也不会加载。所有图像文件都在 assets/images 中。
then 可能需要做一些 webpack 配置的事情，而且有时 jpg 和 JPEG 对我来说很重要。我知道它是有线的，但它发生在我身上。试试JPEG看看。这也可以帮助你stackoverflow.com/questions/49290208/…
我能够让它工作，让我绊倒的一件事是在对象键中，我正在拉动图像的动态路径，是一个“-”，它不喜欢那样。在那上面掉进了兔子洞。在代码中找到这个相对路径的任何人都可以工作。