查找我使用 vue-cli 生成的 Webpack-simple 和 Vuejs 图像的问题

Question

我有以下文件夹结构：

由于我的应用程序很简单，我不需要管理员来处理我的网站，所以我只想使用 json 文件来提供它！

在我的 Cases.vue 文件上，我有一个 v-for 迭代我的 data/cases.json 文件，但我无法打印 [=49= 引用的图像]!

有我的代码：

{
  "cases": [{
    "behance": "https://www.globo.com",
    "bg_box": "bg_case_grandeshistorias",
    "logo": "./assets/images/cases/logos/uirapuru.png",
    "alt": "Colégio Uirapuru",
    "name": "Colégio Uirapuru",
    "description": "Grandes histórias começam aqui",
    "background": "../assets/images/cases/bg/grandeshistorias-bg.jpg"
  }, {
    "behance": "https://www.terra.com.br",
    "bg_box": "bg_case_building",
    "logo": "../assets/images/cases/logos/flir.png",
    "alt": "FLIR Systems",
    "name": "FLIR - Building Store",
    "description": "A melhor solução estrutural",
    "background": "../assets/images/cases/bg/building-bg.jpg"
  }]
}

<template>
  <div class="container-fluid p_top_header relative">
    <div style="" class="bg_cases"></div>
    <div class="row relative">
      <div class="col-xs-12 col-sm-6 col-md-4" v-for="case in records.cases">
        <a :href="case.behance" target="_blank" class="box_cases" data-bg="#case_pump">
          <div class="img_case" :class="case.bg_box"></div>
          <div class="content_cases">
            <div class="d_table h_full">
              <div class="d_table_cell">
                <img :src="case.logo" :alt="case.alt">
                <h4>{{ case.name }}</h4>
                <span>{{ case.description }}</span>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export
  default {
    name: 'Cases',
    data() {
      return {
        records: require('../data/cases.json')
      }
    }
  }
</script>

这些是我的 Cases.vue 和我的 cases.json 文件。

有人知道如何正确打印标签上的图像吗 <img :src="case.logo" :alt="case.alt"> 例如？

事实上我得到了错误：1 GET http://localhost:8080/assets/images/cases/logos/empresa.png 404 (Not Found)

问题是我不知道资产图像的真实路径，因为我是第一次使用 webpack，而且我不习惯使用内存中加载的 code/files ！我尝试了几条路径试图找到正确的路径但没有成功！真正的路径是 src/assets/images/cases/logos/logo.png 但我不知道如何通过 webpack 作为模块打包器的代码找到它！

希望有人能帮助我！

提前致谢！！

Answer 1

因为 json-loader 不寻找路径（并且不能，因为 JSON 本身没有定义资产路径的特殊语法，而不是任何其他普通字符串，用于 webpack识别），webpack 不会处理你的 /assets.

因为据 webpack 所知，它从您的入口文件解析的所有 JS 中都没有引用 /assets 中的任何文件。

如果您改为在 CSS 中引用这些资源之一，webpack 的 css 加载程序会识别出这一点，将资源复制到 /dist 文件夹并相应地更改路径。

一个解决方案可能是添加 copy-webpack-plugin

查找我使用 vue-cli 生成的 Webpack-simple 和 Vuejs 图像的问题

Issue to find my images Webpack-simple and Vuejs generated with vue-cli

javascript

json

assets

webpack

vue.js