Tôi đang tìm url phù hợp để tham chiếu đến nội dung tĩnh, như hình ảnh trong Vue javascript.

Ví dụ: tôi đang tạo một điểm đánh dấu tờ rơi bằng hình ảnh biểu tượng tùy chỉnh và tôi đã thử một số url, nhưng tất cả chúng đều trả về 404 (Not Found):

Main.vue:

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

Tôi đã thử đưa các hình ảnh vào thư mục tài sản và thư mục tĩnh nhưng không thành công. Tôi có phải yêu cầu vue tải những hình ảnh đó bằng cách nào đó không?

Đối với bất kỳ ai muốn tham khảo hình ảnh từ mẫu, Bạn có thể tham khảo hình ảnh trực tiếp bằng cách sử dụng '@'

Thí dụ:

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

Trong thiết lập thông thường Vue, /assetskhông được phục vụ.

src="data:image/png;base64,iVBORw0K...YII="Thay vào đó, các hình ảnh trở thành chuỗi.

Sử dụng từ bên trong JavaScript: require()

Để lấy hình ảnh từ mã JS, hãy sử dụng require('../assets.myImage.png'). Đường dẫn phải tương đối (xem bên dưới).

Vì vậy, mã của bạn sẽ là:

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
    // ...
});

Sử dụng đường dẫn tương đối

Ví dụ: giả sử bạn có cấu trúc thư mục sau:

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

Nếu bạn muốn tham chiếu hình ảnh trong MyComponent.vue, đường dẫn sẽ là../assets/myImage.png

Đây là DEMO CODESANDBOX hiển thị nó đang hoạt động.

Để Webpack trả về các đường dẫn nội dung chính xác, bạn cần sử dụng lệnh request ('./ relative / path / to / file.jpg'), sẽ được xử lý bởi trình tải tệp và trả về URL đã phân giải.

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

Xem các mẫu VueJS - Xử lý tài sản tĩnh

Một giải pháp tốt hơn sẽ là

Thêm một số phương pháp hay và bảo mật vào câu trả lời của @ acdcjunior, để sử dụng @thay vì./

Trong JavaScript

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

Trong mẫu JSX

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

sử dụng @các điểm đến srcthư mục.

bằng cách sử dụng ~các điểm tới gốc của dự án, giúp dễ dàng truy cập vào node_modulestài nguyên và các tài nguyên cấp gốc khác

Ngay sau thẻ script oppening, chỉ cần thêm import someImage from '../assets/someImage.png' và sử dụng nó cho một url biểu tượngiconUrl: someImage

Bạn đang sử dụng hệ thống nào? Webpack? Vue-loader?

Tôi sẽ chỉ động não ở đây ...

Vì .png không phải là một tệp JavaScript, bạn sẽ cần phải định cấu hình Webpack để sử dụng trình tải tệp hoặc trình tải url để xử lý chúng. Dự án được dựng bằng vue-cli cũng đã định cấu hình điều này cho bạn.

Bạn có thể xem qua webpack.conf.jsđể xem liệu nó có được cấu hình tốt như

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

/assets dành cho các tệp được webpack xử lý trong quá trình đóng gói - đối với điều đó, chúng phải được tham chiếu ở đâu đó trong mã javascript của bạn.

Các tài sản khác có thể được đưa vào /static, nội dung của thư mục này sẽ được sao chép nguyên trạng về /distsau.

Tôi khuyên bạn nên thử thay đổi:

iconUrl: './assets/img.png'

đến

iconUrl: './dist/img.png'

Bạn có thể đọc tài liệu chính thức tại đây: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Hy vọng nó sẽ giúp ích cho bạn!

Có cấu trúc mặc định của các thư mục do Vue CLI tạo ra, chẳng hạn như src/assetsbạn có thể đặt hình ảnh của mình ở đó và tham khảo điều này từ HTML như sau <img src="../src/assets/img/logo.png">(hoạt động tự động mà không có bất kỳ thay đổi nào khi triển khai).

Tôi đang sử dụng typecript với vue, nhưng đây là cách tôi làm về nó

<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>

Tất nhiên là hiệu src="@/assets/images/x.jpgquả, nhưng cách tốt hơn là: src="~assets/images/x.jpg