VueJs - 将字符串放在 img src 属性中[重复]答案

【问题标题】：VueJs - put string inside of a img src attribute [duplicate]VueJs - 将字符串放在 img src 属性中[重复]
【发布时间】：2020-02-25 02:52:23
【问题描述】：

我需要为一个 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 编译失败，出现 1 个错误，下午 4:02:34

./wp-content/themes/theme/assets/js/Careers 中的错误。 vue?vue&type=template&id=bf690b58&

模块错误（来自 ./node_modules/vue-loader/lib/loader s/templateLoader.js)：（发出的值而不是错误的实例）

编译模板时出错：

src="/wp-content/themes/theme/dist/images/icons/career rs/{{ job.departments[0].name }}.svg"：边属性中的插值有被移除。请改用 v-bind 或冒号简写。例如，代替<div id="{{ val }}">，使用<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 编译失败，出现 1 个错误，下午 4:06:01

./wp-content/themes/theme/assets/js/Careers 中的错误。 vue?vue&type=template&id=16c0d4b0&

模块错误（来自 ./node_modules/vue-loader/lib/loader s/templateLoader.js)：（发出的值而不是错误的实例）

编译模板时出错：

invalid expression: 中的正则表达式标志无效
/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg
原始表达式： :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() 注入到<img src="/wp-content/themes/theme/dist/images/icons/careers/(INJECT IT HERE).svg" alt="Engineering" /> 的最后一部分

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

关闭，当您使用binding 语法时，您需要将您的实际 URL 用单引号括起来，以便将其作为字符串进行解析：

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

或者只是将整个 URL 放入一个变量中：

let someScopedVariable = '/wp-content/themes/theme/dist/images/icons/careers/' + job.departments[0].name.toLowerCase() + '.svg';

<img :src="someScopedVariable" />

【讨论】：

DUH jfc 应该试过了，谢谢！

【解决方案2】：

使用模板文字：

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

【讨论】：

【解决方案3】：

如果您使用冒号简写，任何文字文本都必须使用 ' 转义，因为 Vue 将其解释为 JavaScript。请参阅this question 了解更多信息。您看到“无效的正则表达式标志”的原因是 JavaScript 将 /es 中的任何文本解释为正则表达式。例如：

:src="'/wp-content/themes/theme/dist/images/icons/careers/' + job.departments[0].name + '.svg'"

【讨论】：