VueJS 구성 요소의 이미지가 로드되지 않습니다.

VueJS 구성 요소의 이미지가 로드되지 않습니다.

다음과 같은 데이터 개체를 하위 구성 요소로 전송하는 상위 구성 요소가 있습니다.

<child object-data=" url: 'url here', title: 'Title'"></child>

그런 다음 내 자식 구성 요소에서 다음을 수행하여 이 개체 데이터를 가져옵니다.

<script>
    export default {
        props: [
            'objectData'
        ]
    }
</script>

지금은 어떤 이유에선지 이렇게 아무 문제없이 타이틀을 사용할 수 있다.{{ objectData.title }}나타납니다.

그러나 img 태그 내의 URL은 이미지를 렌더링하지 않습니다.

다음을 시도했습니다.

<img :src="objectData.url"/><--- 렌더링 안 함

<img v-bind:src="objectData.url"/><--- 렌더링 안 함

<img v-bind:src="require(objectData.url)"/><--경로가 아니라 오브젝트이기 때문에 경고 에러가 발생합니다.

<img v-bind:src="{objectData.url}"/><--- 에러가 발생하다

<img v-bind:src="{{objectData.url}}"/><--- 에러가 발생하다

돔 요소를 확인해보니 나중에 src 속성도 포함되어 있지 않습니다.

오브젝트 없이 URL을 쓰면 됩니다.

<img v-bind:src="src/assets/images/icon.png"/>

다만, 부모 컴포넌트에서 URL을 취득하고 싶다.

어떻게 해결할지 생각나는 거 없어?웹 팩 파일에 url-loader를 추가했습니다.

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            }

나도 돌아오려고 했다.objectData.url계산/실행 함수:

computed: {
     getImageUrl: function() {
           return objectData.url;
     }
}

그 다음에 이렇게 쓰면:src=“getImageUrl”또는:src=“{{getImageUrl}}”나도 운이 좋지 않았어

저는 같은 문제에 직면했고 그것을 수정했습니다.require기능:

부모 컴포넌트에서App.vue:

<carousel-posts :posts="posts" />

export default {
 name: "app",
data() {
  return {
   posts: [
     {
      img: require("./assets/logo.png"),
      title: "Title 1",
      subTitle: "Sub Title 1",
      body:"lorem ipsum ..."
    }
    ...
    ]
    };
   }
  ...
 }

하위 컴포넌트 i는 루프를 통해posts이미지를 바인드합니다.src다음과 같습니다.

    <div class="card-body" v-for="(post,idx) in posts" >
      <img class="card-img" :src="post.img" />
         ...
     </div>

        <script>
           export default {
            props: ["posts"],
           ...

이 경우 다음과 같은 것이 필요합니다.

     <child :object-data="objectData"></child>

        ...
     data(){ 
          return{
            dataObject:{
              url: require('./assets/someimg.png'), 
              title: 'Title'
             }
            }
          }

업데이트:

프로젝트 트리:

   src
   |_assets
   |   |_logo.png
   |_components
   |   |_CarouselPosts.vue
   |_App.vue

두 가지 대안:

1. vue에서 해결되는 정적 링크입니다.그러나 SRC 기반이며 웹 팩/파일 로더에서는 작동하지 않습니다.

<img :src="'../assets/filename.png'"/>

2. 웹 팩과 연동됩니다.마지막에는 ".default"를 적어 둡니다.

<img :src="require('../assets/filename.png').default"/>

2019년 11월 발효 관련 자료: https://github.com/vuejs/vue-loader/issues/1612

언급URL : https://stackoverflow.com/questions/53682725/image-in-vuejs-component-is-not-loading