>

Vue.js에서 만드는 정적 웹 사이트에서 간단한 부트 스트랩 카드를 얻으려고합니다. 나는 이것을 위해 Bootstrap-Vue를 사용하고 있습니다. 그러나 b-card 를 사용할 때 이미지를 표시하지 못하는 것 같습니다.   img 와 함께  속성. 카드에 대한 설명서는 다음과 같습니다.

https://bootstrap-vue.js.org/docs/components/card

여기에 이미지를 표시하지 않는 코드가 있습니다 (기타 텍스트는 github 아이콘까지 렌더링)

<b-card img="`../assets/q1.png`" title="7 Little Words" class="mb-2 col-md-6">
       <!--The image above is not showing-->
  <h5 :style="{fontSize:1.3+'em', marginTop:20+'px'}">An addictive vocabulary puzzle for word nerds</h5>
  <div class="demo">
    <a href="" :style="{marginBottom:10+'px'}">VIEW DEMO</a>
  </div>
  <div class="github">
    <h4>Github</h4>
                  <!--This image below is showing-->
    <a href=""><img src="../assets/GitHub.png" alt="GitHub"></a> 
  </div>
</b-card>

img 와 관련이 있다고 생각합니다.   b-card 의 속성 , 그러나 어떻게 고칠 지 잘 모르겠습니다. 또한 콘솔에 내 오류가 있습니다.

http://localhost:8080/assets/q1.png404 (Not Found)


  • 답변 # 1

    <b-card> 내에서 img 바인딩  다음과 같은 구성 요소 :

       <b-card img-src="../assets/q1.png" title="7 Little Words" class="mb-2 col-md-6">
            ...your markup goes here....
        </b-card>
    
    
    https://bootstrap-vue.js.org/docs에 설명 된 것처럼 vue-loader.conf.js의 "transformToRequire"객체에 값이 'img-src'인 'b-card'속성을 추가하십시오./reference/images/

    예 :

    transformToRequire: {
        'video': 'src',
        'source': 'src',
        'img': 'src',
        'image': 'xlink:href',
        'b-card': 'img-src'
    }
    
    

    도움이됩니까?

  • 답변 # 2

    코드를 테스트했는데 img 속성에서 작은 따옴표를 제거한 후 제대로 작동합니다.

  • 답변 # 3

    Webkit을 사용하고 있습니까? 시도 :

    <b-card :img="require('../assets/q1.png')" 
            title="7 Little Words" 
            class="mb-2 col-md-6">
    
    

    필요는 웹킷이 템플리트를 컴파일 할 때 자산 경로를 대체하도록합니다.

    또한img속성 앞의:에 유의하십시오.v 바인드의 줄임말

관련 자료

  • 이전 gradle 사용자 정의 플러그인 - gradleapi () vs 명시 적 종속성
  • 다음 python - 클래스 상수에서 classmethod 호출