ฉันกำลังมองหา URL ที่ถูกต้องเพื่ออ้างอิงเนื้อหาแบบคงที่เช่นรูปภาพภายใน Vue javascript

ตัวอย่างเช่นฉันกำลังสร้างเครื่องหมายแผ่นพับโดยใช้รูปภาพไอคอนที่กำหนดเองและฉันได้ลองใช้ URL หลายรายการแล้ว แต่ทั้งหมดส่งกลับ404 (Not Found):

Main.vue:

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

ฉันได้ลองใส่รูปภาพในโฟลเดอร์ assets และโฟลเดอร์แบบคงที่โดยไม่มีโชค ฉันต้องบอกให้ vue โหลดภาพเหล่านั้นหรือไม่?

สำหรับใครก็ตามที่ต้องการอ้างอิงรูปภาพจากเทมเพลตคุณสามารถอ้างอิงรูปภาพได้โดยตรงโดยใช้ "@"

ตัวอย่าง:

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

ในการตั้งค่าปกติของ 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

นี่คือรหัสสาธิตการสาธิตที่แสดงการใช้งานจริง

ทางออกที่ดีกว่าคือ

การเพิ่มแนวทางปฏิบัติที่ดีและความปลอดภัยให้กับคำตอบของ @ acdcjunior เพื่อใช้@แทน./

ใน JavaScript

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

ในเทมเพลต JSX

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

โดยใช้@จุดไปยังsrcไดเร็กทอรี

โดยใช้~จุดไปยังรูทของโปรเจ็กต์ซึ่งทำให้ง่ายต่อการเข้าถึงnode_modulesและรีซอร์สระดับรูทอื่น ๆ

เพื่อให้ Webpack ส่งคืนเส้นทางเนื้อหาที่ถูกต้องคุณต้องใช้ require ('./ relative / path / to / file.jpg') ซึ่งจะได้รับการประมวลผลโดย file-loader และส่งคืน 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 - การจัดการสินทรัพย์คงที่

ทันทีหลังจากเปิดแท็กสคริปต์เพียงแค่เพิ่มimport someImage from '../assets/someImage.png' และใช้สำหรับ URL ไอคอนiconUrl: someImage

คุณใช้ระบบอะไร Webpack? Vue-loader?

ฉันจะระดมความคิดที่นี่เท่านั้น ...

เนื่องจาก. 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 จัดการระหว่างการรวมกลุ่ม - ด้วยเหตุนี้ไฟล์เหล่านี้จะต้องถูกอ้างอิงจากที่ใดที่หนึ่งในโค้ดจาวาสคริปต์ของคุณ

สามารถใส่/staticเนื้อหาอื่น ๆ ได้เนื้อหาของโฟลเดอร์นี้จะถูกคัดลอกไปใน/distภายหลังตามที่เป็นอยู่

ฉันแนะนำให้คุณลองเปลี่ยน:

iconUrl: './assets/img.png'

ถึง

iconUrl: './dist/img.png'

คุณสามารถอ่านเอกสารอย่างเป็นทางการได้ที่นี่: https://vue-loader.vuejs.org/en/configurations/asset-url.html

หวังว่ามันจะช่วยคุณได้!

มีโครงสร้างเริ่มต้นของโฟลเดอร์ที่สร้างโดย Vue CLI เช่นsrc/assetsคุณสามารถวางภาพของคุณไว้ที่นั่นและอ้างอิงจาก HTML ดังต่อไปนี้<img src="../src/assets/img/logo.png">เช่นกัน (ทำงานโดยอัตโนมัติโดยไม่มีการเปลี่ยนแปลงใด ๆ ในการปรับใช้ด้วย)

ฉันใช้ typescript กับ 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>

ในที่สุดสิ่งนี้ก็ใช้ได้ผลสำหรับฉันภาพที่ส่งผ่านเป็นเสา:

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

ได้src="@/assets/images/x.jpgผลแน่นอนแต่วิธีที่ดีกว่าคือ: src="~assets/images/x.jpg