如何获取div内容并赋值给img的src属性？（jQuery+JSON翻译场景）

嘿，这个需求我熟，刚好之前做国际化项目的时候遇到过类似的情况，给你几个基于jQuery的靠谱方案，亲测好用～

核心思路 #

你的场景是：从JSON翻译文件拿到图片名称（而非直接的图片URL），需要先获取存储图片名的div内容，再拼接成完整的图片路径，最终设置到img标签的src属性上。下面分场景给出具体实现：

基础静态场景（div内容已存在） #

假设你的HTML结构是这样的：

<!-- 存储从JSON加载的图片名称的div -->
<div class="image-name">product-banner-en.png</div>

<!-- 目标：把图片插入到这个容器里 -->
<div class="image-wrapper"></div>

<!-- 或者已有img标签，只需修改src -->
<img class="target-img" alt="产品横幅">

对应的jQuery代码：

// 第一步：定义图片的基础路径（根据你的项目实际路径调整）
const baseImgPath = '/static/images/';

// 第二步：获取div里的图片名称，注意去除首尾空格避免路径错误
const imgName = $('.image-name').text().trim();

// 方案1：创建新的img标签并插入到容器
if (imgName) {
  const $newImg = $('<img>').attr({
    'src': `${baseImgPath}${imgName}`,
    'alt': '翻译加载的图片'
  });
  $('.image-wrapper').append($newImg);
}

// 方案2：修改已有img标签的src
if (imgName && $('.target-img').length) {
  $('.target-img').attr('src', `${baseImgPath}${imgName}`);
}

异步JSON加载场景（动态填充div内容） #

如果你的翻译文件是异步加载的，一定要在JSON加载完成后再执行图片处理逻辑，否则会拿不到div的内容：

// 先异步加载翻译JSON文件
$.getJSON('/i18n/en.json', function(translationData) {
  // 第一步：把JSON里的图片名填充到div
  $('.image-name').text(translationData.productBannerImg);

  // 第二步：按照基础场景的逻辑设置图片src
  const baseImgPath = '/static/images/';
  const imgName = $('.image-name').text().trim();
  
  if (imgName) {
    $('.target-img').attr('src', `${baseImgPath}${imgName}`);
  }
});

额外优化：图片加载失败处理 #

为了提升用户体验，可以加上图片加载失败的 fallback 逻辑，比如替换成默认图片：

const $newImg = $('<img>')
  .attr({
    'src': `${baseImgPath}${imgName}`,
    'alt': '翻译加载的图片'
  })
  .on('error', function() {
    // 加载失败时切换为默认图片
    $(this).attr('src', '/static/images/default-error.png');
  });

$('.image-wrapper').append($newImg);

内容的提问来源于stack exchange，提问作者dilby