속성 내부 보간을 해결하는 방법이 제거되었습니다. v-bind 또는 콜론 속기 사용? Vue.JS 2

내 vue 구성 요소는 다음과 같습니다.

    <template>
        <div>
            <div class="panel-group" v-for="item in list">
                ...
                <div class="panel-body">
                    <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                        Show
                    </a>
                </div>
                <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
                ...
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    </script>

실행되면 다음과 같은 오류가 있습니다.

Vue 템플릿 구문 오류 :

id = "purchase-{{item.id}}": 속성 내부 보간이 제거되었습니다. 대신 v-bind 또는 콜론 속기를 사용하십시오.

어떻게 해결할 수 있습니까?

내부에서 자바 스크립트 코드 v-bind(또는 바로 가기 ":")를 사용합니다.

:href="'#purchase-' + item.id"

과

:id="'purchase-' + item.id"

또는 ES6 +를 사용하는 경우 :

:id="`purchase-${item.id}`"

src / assets 폴더의 객체와 이미지에서 데이터를 가져 오는 경우 require ( 'assets / path / image.jpeg') 를 포함 해야합니다. 아래와 같이 개체에 를 포함해야합니다.

작업 예 :

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

v-img 요소에 없음- 작동하지 않음

<v-img :src="require(people.closeup)"></v-img>

v-bind 또는 바로 가기 구문 ':'을 사용하여 속성을 바인딩합니다. 예:

<input v-bind:placeholder="title">
<input :placeholder="title">

그냥 사용

:src="`img/profile/${item.photo}`"

가장 쉬운 방법은 파일 주소를 요구하는 것입니다 .

<img v-bind:src="require('../image-address/' + image_name)" />

아래의 완전한 예는 ../assets/logo.png를 보여줍니다 .

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  name: "component_name",
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>

가장 우아한 솔루션은 Webpack 외부에 이미지를 저장하는 것입니다. 기본적으로 Webpack은 이미지를 base64로 압축하므로 자산 폴더에 이미지를 저장하면 Webpack이 이미지를 base64로 압축하고 반응 변수가 아니므로 작동하지 않습니다.

문제를 해결하려면 이미지를 PUBLIC PATH에 저장해야합니다. 일반적으로 공용 경로는 "공용"폴더 또는 "정적"에 있습니다.

마지막으로 다음을 수행 할 수 있습니다.

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

그리고 HTML은 다음과 같이 할 수 있습니다.

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

공용 폴더를 사용하는 경우

• 빌드 출력에 특정 이름의 파일이 필요합니다.
• 파일은 실행 시간이 변경 될 수있는 반응 변수에 의존합니다.
• 이미지가 있고 경로를 동적으로 참조해야합니다.
• 일부 라이브러리는 Webpack과 호환되지 않을 수 있으며 태그로 포함하는 것 외에 다른 옵션이 없습니다.

추가 정보 : Vue JS 문서의 "HTML 및 정적 자산"