Question

我正在使用最新版本的vuejs cli webpack模板我有一个.json文件，其中包含我的图像名称，例如：“photo-1.jpg”。
Webpack应将photo-1.jpg转换为photo-1.478tp8w3u.jpg，例如...当我尝试在我的组件中获取图像的正确路径我总是得到如下错误：“模块没有foun：错误无法解决....”
我的图片位于/ assets / lab-assets /。它们应该由webpack处理。
我的组成部分：

<template>
     <main>
          <li v-for="item in items">

                <img v-bind:src="itemUrl(item.img)">

          </li>
     </main>
</template>


    <script>

    var $ = require('jquery')
    window.jQuery = $


    export default {

      name: 'djdb',

      data () {

        return {

            items: []

        }

      },

      created() {

          this.fetchData();

      },

      methods: {

        itemUrl (imgName) {

             // return imgName ? require('./lab-assets/' + imgName) : ''
             // error 

             return require('./assets/lab-assets/' + imgName )
            // error

           // return imgName

        },

        fetchData: function () {

            var self = this;


            $.ajax({

                        method: 'GET',

                dataType: 'json',

                url: '/static/data/lab.json'

            })

            .done(function(response) {

                self.items = response;

            })

            .fail(function(data) {

                 .......

            });

        },
      },

    }

    </script>

提前致谢：）

Answer 1

有两种方法可以做到：

静态

将您的/ assets / lab-assets /移至/ static

<div id="container">
  <div class="box">
    <input type="radio" name="radio" />
    <label>A</label>
  </div>
  <div class="box">
    <input type="radio" name="radio" />
    <label>B</label>
  </div>
  <div class="box">
    <input type="radio" name="radio" />
    <label>C</label>
  </div>
  <div class="box">
    <input type="radio" name="radio" />
    <label>D</label>
  </div>
  <div class="box">
    <input type="radio" name="radio" />
    <label>E</label>
  </div>
  <div class="box">
    <input type="radio" name="radio" />
    <label>F</label>
  </div>
  <div class="line"></div>
  <span class="stretch"></span>
</div>

使用require.context动态动态

```

itemUrl (imgName) {
  return `/static/assets/lab-assets/${imgName}`
}

```

VueJS Webpack使用json数据获取img路径

1 个答案: