javascript - VueJs - 将字符串放入 img src 属性中

Question

我需要为 vue 组件获取一段数据(具体来说，工作部门的名称)，将其转换为小写并将其附加到图像 src 中以渲染正确的图像。因为这些图像只是部门的名称。

目前看起来像这样:

<ul class="jobs-container">
  <li
      v-for="job in filteredJobs"
      :key="job.absolute_url"
      class="u-margin-bottom-small">
    <a :href="job.absolute_url" target="_blank">
      <img src="/wp-content/themes/theme/dist/images/icons/careers/engineering.svg" alt="Engineering" />
      <div>
        <h3 v-html="job.departments[0].name" />
        <span class="position" v-html="job.title" />
      </div>
      <span class="location" v-html="job.offices[0].location" />
    </a>
  </li>
</ul>

我需要做这样的事情:

<ul class="jobs-container">
  <li
      v-for="job in filteredJobs"
      :key="job.absolute_url"
      class="u-margin-bottom-small">
    <a :href="job.absolute_url" target="_blank">

      // insert name of job department
      <img src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />

      <div>
        <h3 v-html="job.departments[0].name" />
        <span class="position" v-html="job.title" />
      </div>
      <span class="location" v-html="job.offices[0].location" />
    </a>
  </li>
</ul>

这不起作用并抛出:

ERROR Failed to compile with 1 errors 4:02:34 PM

error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=bf690b58&

Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

src="/wp-content/themes/theme/dist/images/icons/caree rs/{{ job.departments[0].name }}.svg": Interpolation in side attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |

那么我就走了:

<img :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />

错误:

ERROR Failed to compile with 1 errors 4:06:01 PM

error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=16c0d4b0&

Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

invalid expression: Invalid regular expression flags in

/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg

Raw expression: :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg"

30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |

@ ./wp-content/themes/theme/assets/js/Careers.vue?vue&type=template&id=16c0d4b0& 1:0-223 1:0-223 @ ./wp-content/themes/theme/assets/js/Careers.vue @ ./wp-content/themes/theme/assets/js/careers.js @ ./wp-content/themes/theme/assets/js/main.js @ multi ./wp-content/themes/theme/assets/js/main.js ./wp-content/themes/theme/assets/sass/base.scss

在 Vue 的上下文中我如何获取 job.departments[0].name.toLowerCase()并注入(inject) <img src="/wp-content/themes/theme/dist/images/icons/careers/(INJECT IT HERE).svg" alt="Engineering" /> 的最后一部分

Answer 1

使用模板文字:

  <img :src="`/url/${name}.svg`" alt="Engineering" />