我认为这应该很简单,但是我在如何在Vue单个文件组件中导入和使用图像时遇到了一些麻烦.有人可以帮我怎么做？这是我的代码片段:

<template lang="html">
  <img src="zapierLogo" />
</template>

<script>
import zapierLogo from 'images/zapier_logo.svg'

export default {
}
</script>

<style lang="css">
</style>

我尝试过使用:src,src="{{ zapierLogo }}"等等,但似乎没有用.也找不到任何例子.有帮助吗？

我目前正在构建一个带有 React 前端的 Ruby on Rails Webpacker 应用程序。我现在想要创建调用 Rails API 所需的所有请求。我大致遵循本教程https://www.youtube.com/watch?v=0bKc_ch6MZY（https://github.com/daryanka/react-query-tutorial/blob/master/src/containers/Post.js，https://github.com/daryanka/react-query-tutorial/blob/master/src/Queries.js），为了编写一些基于 axios 的查询函数，我可以将其与react-query一起使用。当端点的 url 是硬编码字符串时，我可以毫无问题地让查询按预期运行。当我尝试传入一个参数来创建动态网址时，我遇到了无法访问该参数的问题；特别是“prodId”参数。然而，我确实注意到“prodId”位于“key”参数数组内，如下所示：

queryKey: Array(2)
0: "product"
1: "1"
length: 2
enter code here

我可以从那里访问它，但这种方法似乎有点不对劲，我也没有找到任何尝试从查询键数组访问参数的示例或文档。我想知道我在传递参数方面做错了什么？反应查询中是否有一些我没有考虑到的语法变化？

反应查询@^3.17.2

webpacker (5.2.1)

axios@^0.21.1

//Product.js

import axios from "axios"
import { getProduct } from "../../queries/products"
import { useQuery } from "react-query"

const prodId= '1'
const { data } = useQuery(['product', prodId], getProduct)

//queries/products.js
import axios from 'axios'

export const getProduct = async (key, { prodId }) => { …

我的问题与使用 Rails 3.1相同，您将“特定于页面的”JavaScript 代码放在哪里？，仅适用于 Rails 6 而不是 Rails 3.1。

假设我有一些 JavaScript 想要用于我的帖子索引页面。我把那个文件放在哪里，我如何包含它？

在上一个问题中，答案通常使用 Rails Asset Pipeline。但是，对于 Rails 6，我的理解是它使用 webpacker 而不是 JavaScript 文件的 Asset Pipeline。

注意：我不希望始终包含该文件。例如。如果我在作者索引页上，我不希望包含帖子索引页的 JavaScript 文件。为什么？想象一下，我$('li').on('click', changeColor);在 JS 文件中拥有帖子索引页面。我可能不希望该代码在作者索引页上运行，但如果包含该文件，它就会运行。您可以通过命名空间来解决这个问题，但我认为不包含不必要的文件会更干净（并且性能更高）。

当我尝试使用webpacker在我的新rails 5.1 app中加载页面时,我收到此错误.我也希望webpacker能够处理CSS.

Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400
Processing by HomeController#welcome as HTML
  Rendering home/welcome.html.erb within layouts/application
  Rendered home/welcome.html.erb within layouts/application (0.4ms)
Completed 500 Internal Server Error in 28ms



ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes:
1. You want to set wepbacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's …

我有点难住了。我的本地 rails 应用程序与 webpacker 4.2 配合得很好并做出反应，但是在部署到生产环境时can't find application in /app/public/packs/manifest.json出现了奇妙的错误。

这是我尝试过的：

• 尝试添加/删除 javascript 包标签的 turbo 链接详细信息。
• 删除了 javascript 包含标签（不确定这是否有帮助）
• 确保我使用的是最新的 webpacker 4.2
• 运行 rake assets:clean && rake assets:precompile 在 heroku 上手动预编译只是为了确保事情正在构建。

我是否错过了构建步骤或生产中会导致这种情况的东西？还需要检查什么？

服务器错误：

2019-12-03T15:18:19.022024+00:00 app[web.1]: I, [2019-12-03T15:18:19.021952 #30]  INFO -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] Completed 500 Internal Server Error in 112ms (ActiveRecord: 30.4ms | Allocations: 21296)
2019-12-03T15:18:19.023103+00:00 app[web.1]: F, [2019-12-03T15:18:19.023029 #30] FATAL -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d]
2019-12-03T15:18:19.023107+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json. Possible causes:
2019-12-03T15:18:19.023109+00:00 app[web.1]: 1. …

环境

Rails 6.0.0
Ruby 2.6.0
Amazon Linux2

什么

当我部署 Rails 应用程序时，会发生此错误

ActionView::Template::Error (Webpacker can't find application in /home/web/www/eloop-regular/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

1. 除非您使用webpack -wwebpack-dev-server 或 webpack-dev-server，否则您希望为您的环境将 compile 的 webpacker.yml 值设置为 …

你能解释一下如何从vue.js组件中的webpacker gem访问资产吗？例如 - 如何使用背景图像创建div.我已经尝试使用/ app/assets/images和/ app/javascripts/assets文件夹,但图像仅在模板部分可用,但不在样式部分:(

在我的情况下

<template>
    <div id="home">
        <div id="intro">
            <img src="assets/cover-image-medium.png" alt="">
        </div>
    </div>
</template>

工作正常,但是

<style scoped>
    #intro {
        height: 200px;
        background: url("assets/cover-image-medium.png");
    }
</style>

不工作:(

怎么了？

我正在使用带有rails 5.1.4的webpacker来使用Reactjs,Redux和react-router-dom.

我有一个导航栏组件,需要显示图像,但我无法访问assets/images文件夹中的图像,也无法访问文件夹中的图像public.

我在这 : app/javascript/src/components/navbar

我的路线定义main.jsx如下:

    <BrowserRouter>
      <div>
        <Alert error={error} />
        <Navbar user={user}/>
        <Switch>
          <Route path="/post/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>
    </BrowserRouter>

这是我尝试过的:

<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />

那3次尝试成功了一次,但后来它给了我一个404 (Not Found)因为当路径改变时,它也使我的图像路径发生了变化.所以从根路径我得到了我的图像,因为/assets/images/logo.png确实存在,但是当我在/post/:id,重新加载页面或只是登陆这里给我以下404:

logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)

你能帮助我吗 ？还有更多关于处理那种或混合reactjs/rails应用程序中图像的方式？

谢谢

一般问题

我刚刚开始将带有角度5的webpacker添加到现有的rails应用程序中.一切都很好,除了测试DI的奇怪问题.

看来我的Angular组件在使用浏览器创建时才起作用,但在使用Jasmine/Karma进行测试时,Dependency Injector无法识别注入令牌.使用伪代码:

@Component({...})
export class SomeComponent {
  constructor(private service: SomeService) {}
}

以上工作在浏览器中,但正在Error: Can't resolve all parameters for SomeComponent: (?).测试中.到目前为止,我注意到它适用于所有@Injectable(),但是一旦我用显式的@Inject替换每个注入:

@Component({...})
export class SomeComponent {
  constructor(@Inject(SomeService) private service: SomeService) {}
}

一切正常(但显然是非常麻烦).有什么明显可能导致这种情况吗？

实际代码

我有一个非常简单的服务与HttpClient一起运行:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import 'rxjs/add/operator/map'

@Injectable()
export class GeneralStatsService {
  constructor(
    private http : HttpClient
  ) {}

  getMinDate() {
    return this.http.get("/api/v1/general_stats/min_date")
      .map(r => new Date(r))
  }
}

当我导航到使用所述服务的组件时,它按预期工作.但是,在使用Jasmine进行测试时,它不起作用:

import { TestBed } from …

我刚刚切换到Rails 6（6.0.0.rc1），它默认将Webpacker gem用于Javascript资产以及Rails-UJS。我想在某些模块中使用Rails UJS，以便通过以下功能提交表单：

const form = document.querySelector("form")
Rails.fire(form, "submit")

在安装了Webpacker的以前的Rails版本中，该Rails引用似乎在我的模块中“全局”可用，但是现在我在调用Rails.fire… 时得到此引用

ReferenceError: Rails is not defined

我怎样才能让Rails从@rails/ujs提供给特定的或我所有的模块？

在我的设置下面...

app / javascript / controllers / form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  // ...
  submit() {
    const form = this.element
    Rails.fire(form, "submit")
  }
  // ...
}

app / javascript / controllers.js

// Load all the controllers within this directory and all subdirectories. 
// Controller files …