Vue.js 동적 이미지 경로가 로드되지 않음

Vue.js 동적 이미지 경로가 로드되지 않음

하나의 파일 컴포넌트 내에서 동적으로 이미지를 로드하려고 하는데 모듈을 찾을 수 없다는 오류가 나타납니다.저는 이 SO 게시물과 같은 일을 하려고 하는데, 제가 뭘 잘못하고 있는지 잘 모르겠어요.웹 팩 템플릿을 사용하여 프로젝트를 설정했습니다.

템플릿의 관련 마크업을 다음에 나타냅니다.

<router-link :to="{ name: 'JobsDetail', params: { slug: job.slug } }">
    <span class="icon">
        <img :src="getIconPath(job.slug)"/>
    </span>
    {{ job.title }}
</router-link>

그리고 이미지를 가져오려는 기능은 다음과 같습니다.

methods: {
    getIconPath (iconName) {
        const icons = require.context('../assets/', false, /\.png$/)
        return iconName ? icons(`./${iconName}.png`) : ''
    }
}

이미지가 있습니다./src/assets/디렉토리로 이동합니다.브라우저 콘솔에 표시되는 오류는 다음과 같습니다.

[Vue warn]: Error in render: "Error: Cannot find module './some-icon.png'."

이것이 웹 팩 설정의 문제인지 get Icon Path 함수의 문제인지 알 수 없습니다.도와주시면 감사하겠습니다!

JavaScript 코드가 다음 위치에 있는 것을 고려하십시오./src/components/JobList.vue그리고 당신의 이미지는/src/assets/, 다음과 같이 사용합니다.

methods: {
    getIconPath (iconName) {
        return iconName ? require(`../assets/${iconName}`) : ''
    }
}

웹 팩이 개발 또는 prod에 구축될 때 이미지 등의 정적 자산이 /static으로 전환되어야 한다고 생각합니다.

컨피규레이션파일 vuejs-templates/webpack/blob/develope/template/config/index.js 를 참조하면 다음과 같은 설정이 있습니다(변경을 하지 않은 경우).

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',

따라서 src는 다음과 같습니다.

<img src="/static/whatEverMyIconIs.png"/>

편집:

설정을 자세히 살펴보면 vuejs-templates/webpack/blob/develope/template/build/webpack.base.conf.js에는 이미지를 /static/img에 배치하는 URL 로더 플러그인이 있습니다.

 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

그러면 src URL이 생성될 수 있습니다(아이콘 로드 방법에 따라 다름).

<img src="/static/img/whatEverMyIconIs.png"/>

언급URL : https://stackoverflow.com/questions/49290208/vue-js-dynamic-image-paths-not-loading