如何在vue javascript

Question

我正在寻找引用静态资源的正确网址，例如Vue javascript中的图片。

例如，我正在使用自定义图标图片创建传单标记，我尝试了几个网址，但它们都返回404 (Not Found)：

Main.vue：

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

我已尝试将图片放在assets文件夹和静态文件夹中，但没有运气。我是否必须告诉vue以某种方式加载这些图像？

Answer 1

对于想要从模板中引用图片的任何人，您可以使用＆＃39; @＆＃39;

直接推荐图片

示例：

<img src="@/assets/images/home.png"/>

Answer 2

在Vue常规设置中，未提供/assets。

图像变为src="data:image/png;base64,iVBORw0K...YII="字符串。

在JavaScript中使用：require()

要从JS代码获取图像，请使用 require('../assets.myImage.png') 。路径必须是相对的（见下文）。

所以你的代码是：

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
    // ...
});

使用相对路径

例如，假设您有以下文件夹结构：

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

如果您想在MyComponent.vue中引用图片，路径应为../assets/myImage.png

此处a DEMO CODESANDBOX显示了它的实际效果。

Answer 3

为了让Webpack返回正确的资产路径，您需要使用require（'./ relative / path / to / file.jpg'），它将由文件加载器处理并返回已解析的URL。 / p>

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

请参阅VueJS templates - Handling Static Assets

Answer 4

这终于对我有用了，图像作为道具传递：

<img :src="require(`../../assets/${image}.svg`)">

Answer 5

在添加脚本标记后，只需添加static async void Main() { //... _logger.LogInformation("Starting application"); await _fltSvc.SubmitFlightReportAsync("this is the report data as a string") _logger.LogInformation("All done"); //... } 并将其用于图标网址import someImage from '../assets/someImage.png'

Answer 6

一个更好的解决方案是

在@acdcjunior的答案中添加一些好的做法和安全性，以使用@代替./

在JavaScript中

require("@/assets/images/user-img-placeholder.png")

在JSX模板中

<img src="@/assets/images/user-img-placeholder.png"/>

使用@指向src目录。

使用~指向项目的根目录，这使得访问node_modules和其他根目录级资源更加容易

Answer 7

它通过使用如下的 require 语法对我有用：

$('.eventSlick').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
    draggable: false,
    prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("@/assets/img/icon/Arrow_Left.svg")+'"></button>',

Answer 8

您使用的是什么系统？的WebPack？ Vue的装载机？

我只会在这里集思广益......

因为.png不是JavaScript文件，所以您需要配置Webpack以使用file-loader或url-loader来处理它们。使用vue-cli搭建的项目也为您配置了这个。

您可以查看webpack.conf.js，看看它是否配置得好

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets适用于在捆绑过程中由webpack处理的文件 - 为此，必须在javascript代码中的某处引用它们。

其他资源可以放在/static中，此文件夹的内容将按原样复制到/dist。

我建议你尝试改变：

iconUrl: './assets/img.png'

到

iconUrl: './dist/img.png'

您可以在此处阅读官方文档：https://vue-loader.vuejs.org/en/configurations/asset-url.html

希望对你有所帮助！

Answer 9

具有由Vue CLI生成的文件夹的默认结构，例如src/assets，您也可以将图像放在此处，并按照<img src="../src/assets/img/logo.png">的格式从HTML进行引用（自动运行，部署时也无需进行任何更改）

Answer 10

我在vue中使用打字稿，但这就是我的解决方法

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

Answer 11

当然src="@/assets/images/x.jpg有用， 但更好的方法是： src="~assets/images/x.jpg