Question

使用数据绑定来定位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 config

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

请遵循任何建议。

Answer 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>

Vue.js的数据绑定问题

1 个答案: