img的src属性引用数组

img的src属性通常用于引用图片的URL地址，而不是直接引用数组。如果你想在HTML中显示数组中的内容，你可以使用其他元素，比如使用ul和li标签来展示数组中的每个元素。以下是一个示例：

<ul>
  <li>数组元素1</li>
  <li>数组元素2</li>
  <li>数组元素3</li>
</ul>

如果你想动态地在HTML中展示数组内容，你可以使用JavaScript来实现。通过遍历数组并在页面上生成相应的元素，你可以将数组内容动态地呈现给用户。但请注意，这并不涉及img标签的src属性。

相关问题

正则匹配所有图片地址src

正则匹配所有图片地址src的方法可以使用以下几种方式：

1. 使用JavaScript的正则表达式进行匹配。可以使用以下代码：

var str = "this is test string <img src=\"http:yanue.net/test.jpg\" width='50' > 123 and the end <img src=\"所有地址也能匹配.jpg\" /> 33! <img src=\"/uploads/attached/image/20120426/20120426225658_92565.png\" alt=\"\" />";
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=\[\'\"\]?(\[^\'\"\]*)\[\'\"\]?/i;
var arr = str.match(imgReg);
var imgSrcArr = \[\];
for (var i = 0; i < arr.length; i++) {
  var src = arr\[i\].match(srcReg);
  if (src && src\[1\]) {
    imgSrcArr.push(src\[1\]);
  }
}
console.log(imgSrcArr);

这段代码会将字符串中所有的图片地址(src属性)提取出来并存储在imgSrcArr数组中。

2. 使用JavaScript的正则表达式进行匹配。可以使用以下代码：

let matchReg = /<img.*?(?:>|\/>)/gi;
let srcReg = /src=\[\'\"\]?(\[^\'\"\]*)\[\'\"\]?/i;
let str = this.form.content;
let arr2 = str.match(matchReg);
let imgSrcArr = \[\];
if (arr2 != null) {
  for (let i = 0; i < arr2.length; i++) {
    let src = arr2\[i\].match(srcReg);
    if (src && src\[1\]) {
      imgSrcArr.push(src\[1\]);
    }
  }
}
console.log(imgSrcArr);

这段代码会将字符串中所有的图片地址(src属性)提取出来并存储在imgSrcArr数组中。

3. 使用PHP的正则表达式进行匹配。可以使用以下代码：

$str = '<img src="/zentao/file-read-92254.jpg" alt="" />';
$pattern_imgTag = '/<img\b.*?(?:\>|\/>)/i';
$pattern_src = '/\bsrc\b\s*=\s*\[\'\"\]?(\[^\'\"\]*)\[\'\"\]?/i';
preg_match_all($pattern_imgTag, $str, $matchIMG);
$imgSrcArr = \[\];
if (isset($matchIMG\[0\])) {
  foreach ($matchIMG\[0\] as $key => $imgTag) {
    preg_match_all($pattern_src, $imgTag, $matchSrc);
    if (isset($matchSrc\[1\])) {
      foreach ($matchSrc\[1\] as $src) {
        $imgSrcArr\[\] = $src;
      }
    }
  }
}
var_dump($imgSrcArr);

这段代码会将字符串中所有的图片地址(src属性)提取出来并存储在$imgSrcArr数组中。

以上是三种常用的正则匹配图片地址(src属性)的方法，你可以根据自己的需求选择其中一种来使用。
#### 引用[.reference_title]
- *1* [JavaScript正则匹配出所有图片及所有图片地址src](https://blog.csdn.net/qq_43434300/article/details/102676481)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [js正则表达式匹配到所有img图片和src](https://blog.csdn.net/qq_43777572/article/details/127406840)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [正则匹配img中的src/a标签href](https://blog.csdn.net/phpstory/article/details/126409163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

这是我的代码<image :src="require('../static/img/'+personal.userphoto)" class="image" lazy-load="true" mode="aspectFill"></image>，获取personal里的对象，会报错nvalid attempt to destructure non-iterable instance.导致其他组件全部显示underfined

根据你提供的代码和错误信息，可能的原因是 `personal.userphoto` 不是一个合法的数组或对象，导致在解构该属性时出现了错误。`require` 函数通常用于加载模块或文件，不适用于加载图片。你可以尝试使用相对路径或绝对路径来直接引用图片，例如：

<image :src="'/static/img/' + personal.userphoto" class="image" lazy-load="true" mode="aspectFill"></image>

其中，`/static/img/` 是图片的根路径，`personal.userphoto` 是图片的文件名。请确保 `personal.userphoto` 是一个字符串类型的文件名，并且图片文件存在于 `/static/img/` 目录中。

另外，如果你使用了 `v-for` 指令渲染图片列表，那么你需要确保数据源是一个数组，并且每个数组项都是一个包含图片路径的对象。例如：

<image v-for="(item, index) in imageList" :key="index" :src="'/static/img/' + item.filename" class="image" lazy-load="true" mode="aspectFill"></image>

其中，`imageList` 是一个包含图片信息的数组。每个数组项都应该包含一个 `filename` 属性，表示图片的文件名。