ไม่สามารถส่งผ่านเส้นทาง src สัมพัทธ์แบบไดนามิกสำหรับ imgs ใน Vue.js + webpack

ปัญหาที่ฉันมีคือการใช้ vue.js กับ webpack

ฉันมีรายการที่ฉันต้องการเติมแบบไดนามิกใน vue.js

ฉันใช้ v-for เพื่อวนซ้ำแต่ละวัตถุและสร้างรายการ

หากต้องการผูกแท็ก img src กับจุดข้อมูล {{resource.img}} ดูเหมือนว่านี้: <img v-bind:src="resource.img"> เพื่อโหลดรูปภาพแบบไดนามิก

อย่างไรก็ตาม เมื่อไคลเอนต์แสดงผลเพจ เส้นทาง src นั้นถูกต้อง อย่างไรก็ตาม มันเป็นเส้นทางสัมพัทธ์จริง (เช่น "../assets/example.png" ฯลฯ แทนที่จะเป็นเส้นทางเอาต์พุตของ webpack ดังนั้น รูปภาพจึงสร้าง 404 เนื่องจากไม่มีรูปภาพที่ "../assets/example.png"

หรืออีกทางหนึ่ง ถ้าฉันฮาร์ดโค้ด src รูปภาพจะโหลด และ src ก็คือพาธบางพาธที่ webpack สร้างขึ้น เพื่อค้นหารูปภาพที่ถูกต้อง

ฉันจะตั้งค่า src แบบไดนามิกด้วย webpack และ vue.js ได้อย่างไร


webpack javascript vue.js
person imchingy    schedule 06.10.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
9
arrow_downward

คุณต้องมี require.context

ตัวอย่างเช่น:

<img width="30" height="30" :src="imgUrl(resource.img)">

var images = require.context('../../assets/img/', false, /\.jpg$/)

export default {
  methods: {
    imgUrl: function (path) {
      return images('./' + path)
    }
  }
}

need.context จะแมปพาธต้นทางกับพาธสุดท้ายในไดเร็กทอรี build สำหรับรูปภาพใดๆ ที่พบในโฟลเดอร์ต้นทาง นี่คือวิธีที่เมธอด imgUrl() จะส่งคืนพาธที่ถูกต้องขณะรันไทม์

person Primoz Rome    schedule 07.10.2016