vue中如何引用static資源javascript

Question

我正在尋找正確的 url 來引用 static 資產，例如 Vue javascript 中的圖像。

例如，我正在使用自定義圖標圖像創建一個 leaflet 標記，我嘗試了幾個 url，但它們都返回404 (Not Found) ：

主視圖：

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

我試過將圖像放在資產文件夾和 static 文件夾中，但沒有成功。 我是否必須告訴 vue 以某種方式加載這些圖像？

Answer 1

對於希望從模板中引用圖像的任何人，您可以使用“@”直接引用圖像

例子：

<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',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

使用相對路徑

例如，假設您有以下文件夾結構：

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

如果要引用MyComponent.vue的圖像，路徑應該是../assets/myImage.png

這是一個演示代碼沙盒，展示了它的實際效果。

Answer 3

更好的解決方案是

在@acdcjunior 的回答中添加一些良好的實踐和安全性，以使用@而不是./

在 JavaScript 中

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

在 JSX 模板中

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

使用@指向src目錄。

使用~指向項目根目錄，方便訪問node_modules等根級資源

Answer 4

為了讓 Webpack 返回正確的資源路徑，您需要使用 require('./relative/path/to/file.jpg')，它將被文件加載器處理並返回解析后的 URL。

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

請參閱VueJS 模板 - 處理靜態資產

Answer 5

在打開腳本標簽之后，只需添加import someImage from '../assets/someImage.png'並將其用於圖標 url iconUrl: someImage

Answer 6

這終於對我有用，圖像作為道具傳遞：

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

Answer 7

你用的是什么系統？ 網絡包？ 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 8

它通過使用像這樣的 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 9

擁有由 Vue CLI 生成的默認文件夾結構，例如src/assets您可以將圖像放在那里並從 HTML 中引用它，如下所示<img src="../src/assets/img/logo.png">以及（無需更改部署即可自動工作）。

Answer 10

我在 vue 中使用 typescript，但這就是我的做法

<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

您可以根據您的環境定義資產路徑

const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;

<template>
    <img :src="`${assets}/logo.png`"/>
    <p>path: {{assets}}</p>
</template>
<script>
    export default {
        data: () => ({
            assets
        })
    }
</script>

理想情況下，這將位於 utils js 文件中，或者作為擴展應用程序 defineProperty，例如：

const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);

並將提供：

<template>
    <img :src="`${$assets}/logo.png`"/>
    <p>path: {{$assets}}</p>
</template>
<script>
    export default {
        mounted() {
            console.log(this.$assets);
        }
    }
</script>

Answer 12

在創建的、安裝的或你需要的地方加載它們

async created() {
   try {
      this.icon = (await import('@assets/images/img.png')).default;
   } catch (e) {
      // explicitly ignored
   }

然后

<img :src=icon />

Answer 13

內部代碼你可以直接要求圖像使用。

const src = require("../../assets/images/xyz.png");

或者

為了動態加載圖像需要這個。

const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
 };

Answer 14

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