Vue.js 的数据绑定问题答案

【问题标题】：Data binding issue with Vue.jsVue.js 的数据绑定问题
【发布时间】：2018-03-17 20:49:59
【问题描述】：

带有数据绑定的目标 html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div class="row" v-for="test in tests">
     <div class="col-12">
        <router-link tag="a" :to="{ name:'test.index', params:{ id: test.id } }" >{{ test.name }}
        </router-link>
     </div>
     <div class="col-12">
         <img :src="(isTestURL && isPosted) ? '~/img/'+ 'testflow-img':'' + '.png'" class="img-fluid" />
      </div>
   </div>

Webpack 混合配置

mix.webpackConfig({
  resolve: {
    alias: {
      masonry: "masonry-layout",
      isotope: "isotope-layout",
      // custom aliases for easy reference
      src: path.resolve(__dirname, "resources/assets/"),
      assets: path.resolve(__dirname, "resources/assets/assets/"),
      img: path.resolve(__dirname, "resources/assets/assets/img/")
    }
  },

我可以看到img/testflow-img.png 的结果，并且没有渲染。喜欢这个example.com/img/testflow-img.png。

/images/testflow-img.png?1a2086faf6b06b086b9f10c5cc50eae2

请听从任何建议。

【问题讨论】：

图片真的存在吗？
渲染的img中的src属性怎么样？您可以通过 devTools 进行检查吗？
你能更简洁地说明你想问什么吗？

标签： javascript data-binding vue.js

【解决方案1】：

使用您的 webpack 配置，您的代码行无法渲染到 public\images 目录。

也许你会像这样使用v-if 而不是Conditional operator

<div class="col-12" v-if = "isTestURL && isPosted">
     <img :src="~/img/testflow-img.png" class="img-fluid" />
</div>

【讨论】：

另外，请务必通过导入资产解决所有 img，也许它会与您一起工作。