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

古斯塔沃·比索里(Gustavo Bissolli)

我具有以下文件夹结构:

在此处插入图片说明

因为我的应用程序很简单,所以不需要管理员来处理我的网站,所以我只想使用一个json文件来提供它!

在我的Cases.vue文件中,我有一个v-for,它在我的data / cases.json文件中进行迭代,但是我无法打印json所引用的图像!

有我的代码:

{
  "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,并且我不习惯处理内存中加载的代码/文件!我尝试了一些路径来尝试找到正确的路径,但是没有成功!真正的路径是src / assets / images / cases / logos / logo.png,但是我不知道如何使用webpack作为模块捆绑器通过代码找到它!

希望可以有人帮帮我!

提前致谢!!

莱纳斯·博格(Linus Borg)

由于json-loader不会查找路径(并且不能,因为JSON本身没有定义资产路径的特殊语法,因此webpack不能识别其他任何普通字符串),因此webpack不会处理您的/assets

因为就webpack而言,从入口文件中解析出来的所有JS中都没有任何地方/assets引用了其中的任何文件

如果您改为在CSS中引用这些资产之一,则webpack的css加载器将识别出该资产,将其复制到/dist文件夹中并相应地更改路径。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我在 vue cli webpack 中使用 vue-resource 我有“Access-Control-Allow-Origin”问题

Vue-cli webpack-simple, mongodb require 问题

如何使用 SourceMaps(使用 Vue CLI 和 Webpack)使用 VS Code 和 Chrome 调试 VueJS 3 Typescript 项目?

如何使用Vue Cli 3配置Webpack-simple?

使用Vue和Webpack动态加载图像时出现问题

如果我们使用vue-cli和webpack-simple来初始化一个vue项目,那么在编码时是否使用ES5或ES6?

vue-cli · 下载 repo vuejs-templates/webpack-simple 失败:无法建立隧道套接字,statusCode=403

Vue CLI 3和Imagemin Webpack插件

我可以使用webpack分别生成CSS和JS吗?

vue-cli loader无法与webpack-simple的默认初始化一起使用

Vue CLI和Webpack:无法运行webpack-dev-server

使用angular-cli建立webpack的问题

Vue CLI图像不会与Webpack一起加载

禁用vue-cli Webpack编码图像base64

我的功能出了什么问题?使用numpy和networkx查找最短路径

将worker-loader与vue-cli和webpack一起使用

使用webpack后Vuejs v-for性能问题

如何使用webpack和vue-cli将服务器端变量发送到vue实例?

带SASS的Webpack-simple + vue-cli-无法编译?

Vue-CLI webpack-simple 模板 - 如何运行构建

VueJs项目-Vue-cli和npm运行构建

Webpack和VueJs CLI v3 –需要图像和Web字体的相对路径

如何使用 vue-cli 和 vue.config.js 在灯塔上纠正“预加载密钥请求”性能问题

查找问题文本块中使用Python opencv的图像

使用 Vue、Typescript 和 Webpack 构建库

使用Ember CLI和Ember-localstorage-dapter生成模型的问题

Webpack和SCSS:如何使用图像路径?

带有 vuejs 和 django restframework 和 restauth 的 django-webpack-loader 的身份验证问题

vue-loader:如何在Webpack 4和vue-cli3中使用vue-loader v15